Question

我正在尝试使用bootstrap的列，总计是24个。现在我知道在总共12个之后它会断开一条线，但有没有办法将它保持在同一条线上而只是使用水平线滚动条查看其余部分？这就是我在视图中所拥有的：

<div class="col-lg-9 col-md-7 col-sm-8 col-xs-9">
            <div class="well">
                <h3>Example</h3>
                <hr>
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

这就是我的文件中的内容：

  .well {
    height: 325px;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 150%;
    max-width: 100%;
  }

Answer 1

.box{
    overflow-x:auto;
}
.row {
    width:150%;
 }

用另一个div（框）

围绕你的行

Answer 2

.well{
  border-bottom: solid 1px black;
}

是那样的？

并且：Bootstrap 3 Horizontal and Vertical Divider

编辑：

您至少可以将所有列放在同一行：

<div class="col-lg-9 col-md-7 col-sm-8 col-xs-9">
            <div class="well">
                <h3>Example</h3>
                <hr>
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6>

                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="Description_cat_well">
                                    <div class="well">
                                        <h4>Example</h4>
                                        <hr>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="Description_cat_well">
                                    <div class="well">
                                        <h4>Example</h4>
                                        <hr>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="Description_cat_well">
                                    <div class="well">
                                        <h4>Example</h4>
                                        <hr>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <div class="Description_cat_well">
                                <div class="well">
                                    <h4>Example</h4>
                                    <hr>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <div class="Description_cat_well">
                                <div class="well">
                                   <h4>Example</h4>
                                   <hr>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <div class="Description_cat_well">
                                <div class="well">
                                    <h4>Example</h4>
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

在这里我添加另一个＆＃34;行＆＃34;将您的屏幕分成两部分（您没有任何滚动条，但它在同一条线上）。

你得到了：

<row>
  <slit in two>
    <row>
      <split in three>
      <split in three>
      <split in three>
    </row>
  </split in two>
  <slit in two>
    <row>
      <split in three>
      <split in three>
      <split in three>
    </row>
  </split in two>
</row>

我无法做更多......

Answer 3

确定。 MrSangrief的答案很接近并实际上是钱，但没有必要额外的div。我想我会给一个假人（比如我自己哈哈）回答。您需要增加行百分比。示例：

.row {
  width: 200%;  
}

col-lg-1将等于正常行宽为100％的col-lg-2的确切大小。等等等等。无论大小如何，总共12和以下的总和将总是在一条线上。

如何使用bootstrap的网格系统制作水平滚动条

3 个答案: