Question

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

为了澄清当我说它不起作用时，我的意思是如果我点击下拉列表它不会扩展。顺便说一句，我在表单中有更多的下拉列表，我只是将它们删除，以便在代码中更简洁。

以下是代码：

<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>

Answer 1

更正您的div标签：

<div row>

应该是

<div class="row">

在大多数元素不响应点击的情况下！由于容器和行DIV中的问题，还有另一个div覆盖它。它不是关于剃刀，请查看您渲染的HTML。

应用引导类可防止DropDownList打开

1 个答案: