created horizontal scrolling for bootstrap when going over the 12 gri… (!25682) · Merge requests · Bootstrap / bootstrap

Closed Administrator requested to merge github/fork/PhilipJohnBasile/master into master Feb 22, 2018

Created by: PhilipJohnBasile

…d limit

css: .h-scrollable { overflow-x: auto; white-space: nowrap; } .h-scrollable [class*="col"] { display: inline-block; float: none; white-space: normal; vertical-align: top; }

html:

9:00am

Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blah

9:00am

    <div class="row">
        <div class="col-xs-1">
            <label>9:00am</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah
                blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah
                blah blah blahBlah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>BBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah
                blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah
                blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah
                blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah
                blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah
                blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah
                blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah
                blah blah blah blah blahah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah
                blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah
                blah blahBlah blah blah blah blah blah</label>
        </div>
    </div>
</div>
<div class="container-fluid ">
    <div class="row">
        <div class="col-xs-2">
            <label>9:00am</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah
                blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah
                blah blahBlah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah
                blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah
                blah blahBlah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah
                blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah
                blah blahBlah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah
                blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah
                blah blahBlah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah
                blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah
                blah blahBlah blah blah blah blah blah</label>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-2">
            <label>9:00am</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah
                blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah
                blah blahBlah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>BBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah
                blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah
                blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah
                blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah
                blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah
                blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah
                blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah
                blah blahah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-2">
            <label>Blah blah blah blah blah blah</label>
        </div>
    </div>
</div>