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
The solution is that you can add a . no-container class to the row and add margin: 0 to compensate the negative margin of the row class.
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
Many assume that width: 100vw is the same as width: 100% . This is true on a page that doesn't scroll vertically, but what you might not realize is that the viewport actually includes the scrollbars, too.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With