超过12个带有水平滚动的引导列

时间：2016-07-14 19:04:34

标签： html css twitter-bootstrap twitter-bootstrap-3 grid-layout

我正在尝试使用bootstrap网格系统创建一个表。我知道我们每行应该只使用12列。但我希望有超过12列，整个表格都有水平滚动。所以我正在尝试使用以下代码片段

<span class="col-md-2" style="text-align: center;"><b>Field 1</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 2</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 3</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 4</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 5</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 6</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 7</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 8</b></span>

我想在一行中显示如上所述的8个字段。但是在第6场之后，其他两个领域正在下降。有没有办法让所有8个字段在单行中与水平滚动。

4 个答案:

答案 0 :(得分：22)

Bootstrap网格的四个技巧

1）8列

您可以使用嵌套网格。没有任何表或自定义。例如：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 1</b></div>
        <div class="col-md-6"><b>Field 2</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 3</b></div>
        <div class="col-md-6"><b>Field 4</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 5</b></div>
        <div class="col-md-6"><b>Field 6</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 7</b></div>
        <div class="col-md-6"><b>Field 8</b></div>
      </div>
    </div>
  </div>
</div>

2）滚动

如果要添加水平滚动，请增加主行的宽度：

@media (min-width: 992px) {
  .container-scroll {
    overflow-x: auto;
  }
  .container-scroll > .row {
    width: 133.33333333%; /* = 100% * 4/3 */
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 1</b></div>
        <div class="col-md-6"><b>Field 2</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 3</b></div>
        <div class="col-md-6"><b>Field 4</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 5</b></div>
        <div class="col-md-6"><b>Field 6</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 7</b></div>
        <div class="col-md-6"><b>Field 8</b></div>
      </div>
    </div>
  </div>
</div>

3）各种数量的列

如果每行有不同数量的列，但预先知道列数。

在这种情况下，行的宽度可能不同。因此，有必要设置相对于屏幕宽度的列宽，而不是行的宽度。

  1. 使用vw代替%
  2. 如果行宽100vw
    3. ，则为行设置特殊宽度 

    @media (min-width: 992px) {
  .container-scroll {
    overflow-x: auto;
  }
  .container-scroll .columns-16 {
    width: 133.33333333vw;  /* = 100vw * 16/12 */
  }
  .container-scroll .columns-24 {
    width: 200vw;  /* = 100vw * 24/12 */
  }
  .container-scroll .col-md-2 {
    width: 16.66666667vw !important;
  }
}

.container-scroll > .row {
  margin-top: 24px;
}
.container-scroll > .row > .col-md-2 {
  font-weight: bold;
  text-align: center;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <div class="row columns-16">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
  </div>
</div>
  
<div class="container-fluid container-scroll">
  <div class="row columns-24">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
    <div class="col-md-2">Field 9</div>
    <div class="col-md-2">Field 10</div>
    <div class="col-md-2">Field 11</div>
    <div class="col-md-2">Field 12</div>
  </div>
</div>
  
<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
  </div>
</div>

    4）列数未知

    如果您不知道行中的列数，请将列转换为内联块。

    @media (min-width: 992px) {
  .container-scroll > .row {
    overflow-x: auto;
    white-space: nowrap;
  }
  .container-scroll > .row > .col-md-2 {
    display: inline-block;
    float: none;
  }
}

.container-scroll > .row {
  margin-top: 24px;
}
.container-scroll > .row > .col-md-2 {
  font-weight: bold;
  text-align: center;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
  </div>

  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
    <div class="col-md-2">Field 9</div>
    <div class="col-md-2">Field 10</div>
    <div class="col-md-2">Field 11</div>
    <div class="col-md-2">Field 12</div>
  </div>

  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
  </div>
</div>

答案 1 :(得分：1)

获取更多列：

您可以从这里创建自己的Bootstrap变体：http://getbootstrap.com/customize/您可以在下载，安装然后使用它之前设置网格布局使用的列数以及几乎任何其他CSS定制（您网站上的新模板。

易。

或者，如果您喜欢挑战并且有几个小时的时间可以杀死，您可以打开Bootstrap.css文件并手动添加新的CSS元素并重新调整每个width [百分比]参数列定义。

水平滚动表

引导程序的整个前提是不要有任何溢出屏幕，无论如何。如果你特意做希望事情溢出，那么你要么不应该使用bootstrap，要么你需要手动调整CSS中的一些设置，我再次推荐你回到{{3}哪个可能有一个解决方案，否则你可以探索CSS并在bootstrap模板文件中设置一些CSS参数。

您可以使用预先定义的bootstrap table css类进行此类操作，您是否已经探索过http://getbootstrap.com/customize/？

或Bootstrap documentation可以为您提供手动执行此操作的有用答案。

答案 2 :(得分：0)

您可以在2中拆分bootstrap col-12。您现在有24列

    <div class "row">
      <div class="col-6">
        <div class "row">
          <div class="col-1">
            1
          </div>
          <div class="col-1">
            2
          </div>
          <div class="col-1">
            3
          </div>
          <div class="col-1">
            4
          </div>
          <div class="col-1">
            5
          </div>
          <div class="col-1">
            6
          </div>
          <div class="col-1">
            7
          </div>
          <div class="col-1">
            8
          </div>
          <div class="col-1">
            9
          </div>
          <div class="col-1">
            10
          </div>
          <div class="col-1">
            11
          </div>
          <div class="col-1">
            12
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class "row">
          <div class="col-1">
            13
          </div>
          <div class="col-1">
            14
          </div>
          <div class="col-1">
            15
          </div>
          <div class="col-1">
            16
          </div>
          <div class="col-1">
            17
          </div>
          <div class="col-1">
            18
          </div>
          <div class="col-1">
            19
          </div>
          <div class="col-1">
            20
          </div>
          <div class="col-1">
            21
          </div>
          <div class="col-1">
            22
          </div>
          <div class="col-1">
            23
          </div>
          <div class="col-1">
            24
          </div>
        </div>
      </div>
    </div>

答案 3 :(得分：0)

＆＃13;
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 1</b></div>
        <div class="col-md-6"><b>Field 2</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 3</b></div>
        <div class="col-md-6"><b>Field 4</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 5</b></div>
        <div class="col-md-6"><b>Field 6</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 7</b></div>
        <div class="col-md-6"><b>Field 8</b></div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题