jquery - Bootstrap 列占用的宽度超出了应有的宽度

Question

我正在使用 bootstrap，但我不明白为什么我的列在应该等于正确数量 (8+4) 时却从页面扩展。

这是我的意思的演示:http://jsfiddle.net/52VtD/7440/embedded/result/

谁能告诉我我做错了什么？我觉得 4 宽列内的容器可能是问题所在。

完整代码:

<div class="container container-default">
      <div class="col-md-12">    <h3>Support</h3></div>

     <div class="col-md-8">
  <div class="panel panel-default">
    <div class="panel-heading">Common Questions</div>
  <div class="list-group">
    <a href="#" class="list-group-item" data-toggle="collapse" data-target="#info1">
      Linked item in .list-group
      <div id="info1" class="collapse">More Info #1</div>
    </a>    
    <a href="#" class="list-group-item" data-toggle="collapse" data-target="#info2">Linked item in .list-group with Chevron and Badge
      <div id="info2" class="collapse">More Info #2</div>
    </a>    
  </div> 
  </div>   
  </div>     
       <div class="col-md-4">
<div class="container">
<div class="row">
    <div class="panel panel-default">
        <div class="panel-heading">Contact Us</div>
        <div class="panel-body">
            <fieldset>
                <!-- Text input-->
                <div class="form-group">
                    <input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md"> <span class="help-block">help</span> 
                </div>
                <!-- Textarea -->
                <div class="form-group">
                    <textarea class="form-control" id="message" name="message">default text</textarea>
                </div>
                <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
            </fieldset>
        </div>
    </div>
</div>    
   </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://employ.github.io/js/bootstrap.min.js"></script>


</div></div>

Answer 1

您在 col-md-4 中有一个容器类。删除这个，它将起作用。

此外，您的代码一般都乱七八糟。尝试使用 Bootstrap 网格系统:

http://getbootstrap.com/css/#grid

在你的例子中:

<div class="container">
    <div class="row">
      <div class="col-md-12">.col-md-12</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
</div>