CODEWITHSUNDEEP
jquerycsshtmltwitter-bootstrap
Nacho
Nacho

Reputation: 2057

Bootstrap row with horizontal scroll

Im trying to get a row with multiple columns (dynamic with no max) and therefore to get an horizontal scroll.

When i insert a new column that exceeds the size 12 of bootstrap, it takes that column to a new line. What I want is to preserve that column in the same line and to get the horizontal scroll view.

Tried already with something like this, but didn't worked...

<div class="span11" style="overflow: auto">
    <div class="row-fluid">
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
    </div>
</div>

Upvotes: 15

Views: 45255

Answers (2)

FaizFizy
FaizFizy

Reputation: 459

Larger screen will also need float: none; in col- classes.

.row-fluid {
    overflow: auto;
    white-space: nowrap;
}

.row-fluid .col-lg-3 {
     display: inline-block;
     float: none;
}

Upvotes: 8

Erfan Nazmehr
Erfan Nazmehr

Reputation: 292

row-fluid need the style attribute " white-space: nowrap; " and the divs inside need the style attribute " display: inline-block; "

.row-fluid{
     white-space: nowrap;
}
.row-fluid .col-lg-3{
     display: inline-block;
}

try it

Upvotes: 25

Related Questions