Question

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

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

这只是一个测试，所以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，则您的图例应按预期运行。请注意，这将导致您的“电话详细信息”表单包装。

Bootstrap模态和图例标记

1 个答案: