Html 引导模式和图例标记

大家好，我有一个问题，我有一个模态窗口，有两个图例标签。图例标记下的线位于模式窗口之外

当我在模态窗口外使用相同的代码时，它看起来很好。我确信这是一件很简单的事情，我现在还看不到

这只是一个测试，所以html非常难看

我创造了这个！论证问题

这是相关代码

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

---

您的模式中有一个，引导提供的响应宽度可以比模式宽，具体取决于查看大小。如果删除容器类或div，则图例应按预期操作。请注意，这将导致您的电话详细信息表单被包装。

在表单组中放置字段集没有意义。