Bootstrap-具有水平滚动的一行，而不是换行到下一行 [英] Bootstrap - having one column in a row with horizontal scroll instead of wrapping onto the next line

问题描述

我正在尝试创建分为2个部分的页面(使用列).我想在左侧列(第一外部列)中嵌套其他列(内部列x).

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).

我正在尝试这样做，以便如果在第一外部列中有超过12个内部列，则它们不会绕到下一行-而是包含它们的外部列具有水平滚动.

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>

这是我用来使其更清晰的CSS:

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;
 }

推荐答案

内部列应包装在另一个.row中.然后添加flex类以防止使用flexbox包装列...

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>

---

注意:由于包含了flexbox，因此在 Bootstrap 4 中将简化此布局: https://www.codeply.com/go/f4XKDAKLHq 您只需要使用flex-nowrap类.

---

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.

这篇关于Bootstrap-具有水平滚动的一行，而不是换行到下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！