我正在使用 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>
最佳答案
您在 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>
关于jquery - Bootstrap 列占用的宽度超出了应有的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25280749/