应用引导类防止DropDownList打开

我有这个页面，我最近使用Bootstrap使其响应。在响应之前，页面正常工作，但在不同的屏幕尺寸下看起来很糟糕。现在，它在多种屏幕尺寸下看起来很棒，但下拉列表不起作用。如果我删除class =“col-lg-10 col-md-10 col-xs-12”，那么下拉列表将再次起作用。另外，如果我将下拉列表从div中取出并放在页面上的其他位置，它也可以工作。应用引导类防止DropDownList打开

当我说它不起作用的澄清，我的意思是，如果我点击下拉列表它不会扩大。顺便说一句，我有更多的dropdownlists的形式，我只是删除他们在代码中更简洁。

下面是代码：

<div row> 
    <div class="col-lg-10 col-md-10 col-xs-12"> 
      <table class="table table-condensed"> 
       <tr> 
         <th>@Html.LabelFor(m => m.CategoryId, htmlAttributes: new { @class = "control-label col-md-2" })</th> 
       </tr> 
       <tr> 
         <td> 
          <span style="font-weight:normal;">@Html.DropDownListFor(m => m.CategoryId, new SelectList(ViewBag.Category, "CategoryId", "CategoryName"))</span> 
          @Html.ValidationMessageFor(m => m.CategoryId, "", new { @class = "text-danger" }) 
         </td> 
       </tr>  
      </table> 
    </div> 
</div>

我发现我可以在下面添加此链接来解决这些下拉网页，但它搅乱了所有的格式。

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

，这里是渲染HTML：

<div class="col-lg-10 col-md-10 col-xs-12"> 
    <table class="table table-condensed"> 
      <tr> 
       <th><label class="control-label col-md-2" for="CategoryId">Category</label></th>      
      </tr> 
       <td> 
        <span style="font-weight:normal;"><select data-val="true" data-val-required="The Category field is required." id="CategoryId" name="CategoryId"><option value="ae159a72-2447-42b6-9693-149964fdc896">Other</option> 
         <option value="45cf430d-bd7e-4003-ab97-33fb55520551">E-Mail/ Outlook</option> 
         <option value="dc27d6b2-59d9-46fd-b92e-42cf70b7f732">Administrative</option> 
         <option value="44124582-e37a-47f4-a98a-5f97049ba5b9">OPS</option> 
         <option selected="selected" value="c0ed4cd4-400f-479c-aa26-8522667241d5">Automation</option> 
         <option value="9080fef6-382f-49ad-993b-9f0689f90c95">Network</option> 
         <option value="d7b2ce5f-f9e6-48f1-a6bb-b4141c8bdc7e">stcusa.com</option> 
         <option value="d8121018-a401-48a0-9dec-c209b3be3495">Software</option> 
         <option value="7ba3a1e6-5cd6-4d63-8c09-d54826261441">Reporting</option> 
         <option value="efe7c637-e210-44d4-83a3-dac3199f5cae">Phones</option> 
         <option value="f8f35cdd-09a6-459d-9a7c-dd28df0f8776">Hardware</option> 
    </select></span>

来源

2016-03-08 djblois

纠正你的div标签：

<div row>

应该

<div class="row">

在大多数地方的元素确实情况不响应点击！由于容器和行DIV的问题，还有另一个div覆盖它。这不是关于剃刀，看看你的呈现的HTML。

来源

2016-03-08 15:19:11 KavehG

KavehG，谢谢你的回答。我改变了这一点，但它仍然不起作用。就像我在我原来的帖子中所说的，如果我从div中删除class =“col-lg-10 col-md-10 col-xs-12”，那么它确实有效。或者如果我添加该链接，但无论如何，他们都会混淆页面上的格式（以不同的方式）。 – djblois

你可以发布你的呈现HTML请！ – KavehG

KavehG，我为问题区域添加了一段剪裁的HTML。 – djblois

应用引导类防止DropDownList打开

回答

相关问题