How to make bootstrap 3 fluid layout without horizontal scrollbar
here is sample link: http://bootply.com/76369
this is html i use.
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
bootstrap 3 has no container-fluid and row-fluid.
i cannot wrap it with .container class because it will become fixed layout.
how to make it fluid (full page width) layout? ( without horizontal scrollbar )
with these markup. when you view in the result the x-scroll bar is visible so you can scroll to left and right that it should not.
edited: 2015-12-09
Already got answer and Bootstrap already released the fix since 3.1.0
This was introduced in v3.1.0: http://getbootstrap.com/css/#grid-example-fluid
Commit #62736046 added ".container-fluid variation for full-width containers and layouts".
I also have it and while waiting on them to fix it, I added this shame css :
body { overflow-x: hidden;}
it's an horrible alternative, but it work. I'll be happy to remove it when they'll have fixed the issue.
An other alternative, as pointed out in the issue, is to override .row :
.row {
margin-left: 0px;
margin-right: 0px;
}
This is a known issue in BS 3 - https://github.com/twbs/bootstrap/issues/9862?source=cc
I have tested on Bootply using the latest build, so keep watching GitHub for the latest updates/fix.
In Bootstrap 3, .row is must be used inside a .container or .container-fluid to counteract the negative margins on the row. This will eliminate the horizontal scrollbar.
From the docs...
"Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding."
Bootstrap 4
The container > row > col relationship work the same way as 3.x...
"Containers are the most basic layout element in Bootstrap and are required when using our default grid system"
链接地址: http://www.djcxy.com/p/88324.html上一篇: 无法将引导程序网格应用于布局