Question

这是我的代码：

<div class="row clearfix">
<div class="col-md-3 column"> </div>
<div class="col-md-1 column">
  <p>Solution 1</p>
  <p>Solution 2</p>
</div>
<div class="col-md-1 column">
  <p>Solution 3</p>
  <p>Solution 4</p>
</div>
<div class="col-md-1 column">
  <p>Solution 5</p>
  <p>Solution 6</p>
</div>
<div class="col-md-1 column">
  <p>About us</p>
  <p>References</p>
</div>
<div class="col-md-1 column">
  <p>Contact us</p>
  <p>Guide</p>
</div>
<div class="col-md-1 column">
  <p>ToS</p>
  <p>Imprint</p>
</div>
<div class="col-md-3 column"> </div>
</div>

http://www.bootply.com/RZiyxudqnS

在较大的显示器上，我想要6组两个链接。（6栏）

在较小的显示屏上，我想要2组6个链接。（2栏）

但是当我将显示屏缩小时，它们都会变成只有一列的线性布局。

如何将其设置为包含2列？

现在我正在使用3-1-1-1-1-1-1-3布局。

Answer 1

您可以将col-xs-6用于较小的设备

<div class="row clearfix">
    <div class="col-md-3 column"> </div>
    <div class="col-md-1 col-xs-6">
      <p>Solution 1</p>
      <p>Solution 2</p>
    </div>
    <div class="col-md-1 col-xs-6">
      <p>Solution 3</p>
      <p>Solution 4</p>
    </div>
    <div class="col-md-1 col-xs-6">
      <p>Solution 5</p>
      <p>Solution 6</p>
    </div>
    <div class="col-md-1 col-xs-6">
      <p>About us</p>
      <p>References</p>
    </div>
    <div class="col-md-1 col-xs-6">
      <p>Contact us</p>
      <p>Guide</p>
    </div>
    <div class="col-md-1 col-xs-6">
      <p>ToS</p>
      <p>Imprint</p>
    </div>
    <div class="col-md-3 column"> </div>
  </div>

Answer 2

在Bootstrap中有四个类 .col-lg- .col-md- .col-sm- .col-xs- 这种不同的类适用于不同的屏幕尺寸

.col-xs-X  **0 < X < 767px;** 

.col-sm-X **768px < X < 991px;**

.col-sm-X **992px < X < 1169px;**

.col-sm-X **1170px < X**

这是Bootstrap网格系统的链接。 Click Here

Bootstrap页脚 - 在小显示屏中从6列更改为2列

2 个答案: