應用引導類防止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打開

回答

相關問題