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中有一个容器类。删除这个，它会工作。

此外，您的代码一般都搞砸了。尝试使用引导网格系统：

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>

Answer 2

是那个代码！

    <div class="col-md-4">
<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>

不要在行中使用Container。

Bootstrap列占用的宽度超出了应有的范围

2 个答案: