Bootstrap - having one column in a row with horizontal scroll instead of wrapping onto the next line

问题

I am trying to create page which is divided into 2 sections (using columns). In the left hand side column (first outer column) I want to have other columns nested inside (inner column x).

I am trying to make it so that if there are more than 12 inner columns in the first outer column, they don't wrap onto the next line - rather the outer column which contains them has a horizontal scroll.

Here is the code I have, however my inner columns still wrap onto the next line:

<div class="container">
  <div class="row">

   <div class="col-md-9">
   <h4>first outter column (trying to get this column to be scroll-able instead of wrap onto next line)</h4>
    <div class="col-md-4">
        <div><b>inner column 1</b></div>
    </div>
    <div class="col-md-4">
        <div><b>inner column 2</b></div>
    </div>
    <div class="col-md-4">
        <div><b>inner column 3</b></div>
    </div> 
    <div class="col-md-4">
        <div><b>inner column 4</b></div>
    </div>
    </div>

    <div class="col-md-3">
    <h4>second outter column</h4>
    </div>
  </div>
</div>

And here is the CSS I am using to make it more clear:

.col-md-9 {
 background-color: red;
 white-space: nowrap;
 overflow-x: auto;
 }

 .col-md-3 {
 background-color: yellow;
 }

 .col-md-4 {
    border-style: solid;
    border-color: blue;
 }

回答1:

The inner columns should be wrapped in another .row. Then add a flex class to prevent the columns from wrapping using flexbox...

 .flex {
     display: flex;
 }

https://www.codeply.com/go/zJB4GkMC44

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <h4>first outter column (trying to get this column to be scroll-able instead of wrap onto next line)</h4>
            <div class="row flex">
                <div class="col-md-4">
                    <div><b>inner column 1</b></div>
                </div>
                <div class="col-md-4">
                    <div><b>inner column 2</b></div>
                </div>
                <div class="col-md-4">
                    <div><b>inner column 3</b></div>
                </div>
                <div class="col-md-4">
                    <div><b>inner column 4</b></div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <h4>second outter column</h4>
        </div>
    </div>
</div>

Note: This layout would simplified in Bootstrap 4 since flexbox is included: https://www.codeply.com/go/f4XKDAKLHq You would just need to use the flex-nowrap class.

来源：https://stackoverflow.com/questions/49588001/bootstrap-having-one-column-in-a-row-with-horizontal-scroll-instead-of-wrappin

标签

html

css

twitter-bootstrap

twitter-bootstrap-3

grid-layout