Question

我正在尝试创建分为2个部分的页面（使用列）。在左侧列（第一个外部列）中，我想要嵌套其他列（内部列x）。

我试图这样做，如果第一个外部列中有超过12个内部列，它们不会换行到下一行 - 而是包含它们的外部列有一个水平滚动。

这是我的代码，但我的内部列仍然包含在下一行：

<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：

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

Answer 1

内部列应该包含在另一个.row中。然后添加flex类以防止使用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>

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

Bootstrap - 连续一列，水平滚动，而不是包裹到下一行

1 个答案: