twitter-bootstrap 关于为 Bootstrap 3 响应面板设置宽度的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24287969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Issue On Setting Width For Bootstrap 3 Responsive Panel
提问by user3649067
Can you please take a look at This Demoand let me know why the heading of the panel behaves like the demo (got margin from Left and Right)?
As I mentioned on the post title I am trying to create a Responsive Panel so all element in side of the righttoc-->panel panel-default-->like Forms also behave Responsive
你能看看这个演示并让我知道为什么面板的标题表现得像演示一样（从左和右获得边距）？正如我在帖子标题中提到的，我正在尝试创建一个响应式面板，因此righttoc-->panel panel-default-->类似表单中的所有元素 也表现出响应式
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-sx-12" id="lefttoc">Left</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-sx-12" id="maptoc">Center</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-sx-12" id="righttoc">
<div class="panel panel-default col-lg-10 col-md-11 col-sm-2 col-sx-12 ">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div><!-- End of Row -->
Thanks
谢谢
回答by isherwood
The problem is mostly that you've nested columns without adding the required row element in between. There are negative margins on rows that resolve your issue.
问题主要在于您嵌套了列而没有在其间添加所需的行元素。解决您的问题的行上有负边距。
Try this instead:
试试这个：
<div class="row">
<div class="col-sm-2 col-xs-12" id="lefttoc">Left</div>
<div class="col-sm-7 col-xs-12" id="maptoc">Center</div>
<div class="col-sm-3 col-xs-12" id="righttoc">
<div class="row">
<div class="col-lg-10 col-md-11 col-sm-2 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
</div><!-- End of Row -->
</div>
</div><!-- End of Row -->
