- 首页
- 前端开发
- Bootstrap 3.3.7 “行"导致水平滚动条
Bootstrap 3.3.7 “行"导致水平滚动条
[英] Bootstrap 3.3.7 "row" causing horizontal scroll bar
本文介绍了Bootstrap 3.3.7 “行"导致水平滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
好吧好吧，我知道了.这个问题被问了很多.但是，到目前为止，我还没有找到可行的解决方案.我把我的页面归结为仅此而已:
<div class="col-sm-12">东西
而且还有一个水平滚动条.在开发工具中，我可以找到 row:
.row {右边距:-15px；左边距:-15px；}
如果我取消点击 margin-right: -15px; 那么问题就会消失.但是，在我的实际页面(包含所有内容)上，这会产生另一个问题.页面需要有零边距，但现在右边有 15 像素的边距.
答案之一此处 很遗憾用 container-fluid 包裹 row.另一个说将它包装在 container 中.这两个确实使滚动条消失了，但它们也给了页面边距，这是我不能拥有的.
我发现 threads 早在 2013 年就在讨论这个问题.这是真的吗?还没修好?
我需要做什么?
还有:小提琴
https://jsfiddle.net/oLx4g8e3/1/
解决方案
首先你不需要 row 或 col-*12 类，如果你的部分是100% 全面查看 this 引导程序示例，他们没有采用任何 row 或 col-*12 既没有 header 也没有 jumbotron.如果您的部分有列只需在 col-* 类中取行例如
<div class="row">stuff</div>
<div class="col-sm-6"><div class="row">stuff</div>
小提琴
或者如果你使用的是 container-fluid
<div class="row"><div class="col-sm-6"><div class="row">stuff</div>
<div class="col-sm-6"><div class="row">stuff</div>
小提琴
Ok ok, I know. This question has been asked a lot. But, so far, I have not found a working solution. I boiled my page down to nothing but this:
<div class="row">
<div class="col-sm-12">
stuff
</div>
</div>
And there is still a horizontal scroll bar. In dev tools, I can find the row:
.row {
margin-right: -15px;
margin-left: -15px;
}
And if I un-click margin-right: -15px; then the problem goes away. But, on my actual page (with all of the content) this creates another problem. The page needs to have zero margins, but it now was a 15px margin on the right.
One of the answers here sad to wrap row with container-fluid. Another said to wrap it in container. Both of these did make the scroll bar go away, but they also give the page side margins, which I can't have.
I've found threads discussing this as far back as 2013. Is this really not fixed yet?
What do I need to do?
Also: Fiddle
https://jsfiddle.net/oLx4g8e3/1/
解决方案
First of all you don't need row or col-*12 classes if your section is 100% wide look at this bootstrap example they have not taken any row or col-*12 neither with header nor jumbotron. If your section has column Just take row inside col-* classes for example
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
Fiddle
Or in case if you are using container-fluid
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
</div>
</div>
Fiddle
这篇关于Bootstrap 3.3.7 “行"导致水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
