Bootstrap模態和圖例標記

Question

嗨每個人我有一個問題，我有一個模態窗口有兩個圖例標記。圖例標籤下的線條出現在模態窗口之外。

當我在模態窗口之外使用相同的代碼時，它看起來很好。我相信這是一件簡單的事情，我現在無法看到。

這只是一個測試，因此HTML是相當難看..

我創造了這個jsfiddle！證明這個問題

下面是相關代碼

<div class="container"> 
<!-- Email Row --> 
<div class="form-group"> 
    <fieldset> 
     <legend>Login Information</legend>  
    <div class="row"> 
     <form class="form-inline" role="form">  
      <div class="form-group"> 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
        <input type="email" class="form-control" id="inputEmail1" placeholder="Primary Email"> 
       </div>    
      </div> 
      <div class="form-group"> 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
        <input type="email" class="form-control" id="inputEmail1" placeholder="Secondary Email"> 
       </div>    
      </div> 

     </form> 

    </div> <!-- End Row --> 
     </fieldset> 
    </div> <!-- End Form-Group. This adds the space between the rows --> 

<!-- Primary Phone --> 
<div class="form-group"> 
    <fieldset> 
     <legend>Phone Details</legend> 
    <div class="row"> 
    <form role="form" class="form-inline"> 
     <div class="form-group"> 
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
      <input class="form-control" id="primary_phone" name="primary_phone" type="text" data-mask="(999) 999-9999" placeholder="Primary Phone" /> 
     </div>  
    </div> 
    <div class="form-group"> 
      <label for="selectUser">Carrier </label> 
      <select id="selectUser" class="form-control selectWidth"> 
       <option class="">AT&T</option> 
       <option class="">Verizon</option> 
       <option class="">T-Mobile</option> 
       <option class="">Sprint</option> 
      </select> 
    </div> 
     <div class="form-group">&nbsp;&nbsp;&nbsp; 
      <label for="selectUser">Arrival Notifications </label> 
      <select id="selectUser" class="form-control selectWidth"> 
       <option class="">All Arrivals</option> 
       <option class="">None</option> 
       <option class="">Vendors Only</option> 
      </select> 
      </div>  


     </form> 
    </div> <!-- End Row --> 
    </div> <!-- End Form-Group. This adds the space between the rows --> 
<!-- Secondary Phone --> 
    <div class="row"> 
    <form role="form" class="form-inline"> 
     <div class="form-group"> 
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
      <input class="form-control" id="primary_phone" name="primary_phone" type="text" data-mask="(999) 999-9999" placeholder="Secondary Phone" /> 
     </div>  
    </div> 
    <div class="form-group"> 
      <label for="selectUser">Carrier </label> 
      <select id="selectUser" class="form-control selectWidth"> 
       <option class="">AT&T</option> 
       <option class="">Verizon</option> 
       <option class="">T-Mobile</option> 
       <option class="">Sprint</option> 
      </select> 
    </div> 
     <div class="form-group">&nbsp;&nbsp;&nbsp; 
      <label for="selectUser">Arrival Notifications </label> 
      <select id="selectUser" class="form-control selectWidth"> 
       <option class="">All Arrivals</option> 
       <option class="">None</option> 
       <option class="">Vendors Only</option> 
      </select> 
      </div>  

     </form> 

    </div> <!-- End Row --> 
    </fieldset> 
</div> <!-- End Container --> 

Answer 1

你在你的模式，其引導給一個負責任的寬度可以比模式更廣泛的，因觀察大小有<div class="container">。如果您刪除container課程或div，那麼您的圖例應按預期行事。請注意，這會導致您的「電話詳情」表單被換行。