Question

我尝试将网站名称+ 2个图片作为我的网站标题。使用Bootstrap网格布局，我可以通过漂亮的中型/大型设备轻松实现这一点。

| site-name                                                        | | image1 | | image2 |

然而，对于小尺寸设备，我的3列分成3行，布局不是我想要的：

| site-name                                                        |
| image1    |
| image2    |

由于我只使用了3个小列，我想将它们放在同一行，因为它们只使用了几个像素。小屏幕的结果如下：

| site-name | | image1 | | image2 |

我创建了一个Bootply demo。下面的代码是迄今为止我能做的最好的代码。我已尝试使用.pull-right之类的内容来避免添加空的8-cols，但结果是一样的。

当前代码：

<div class="row">
  <div class="col-sm-2">
    <h2>text1</h2>
  </div>

  <div class="col-sm-8">
    <!-- empty -->
  </div>

  <div class="col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>

Answer 1

这听起来像你认为的那样＃＆＃34;小＆＃34;设备是Bootstrap会考虑的东西＆＃34;特别小＃34;。

这应该会给你带来理想的效果：

<div class="row">
  <div class="col-xs-4 col-sm-2">
    <h2>text1</h2>
  </div>

  <div class="hidden-xs col-sm-8">
    <!-- empty -->
  </div>

  <div class="col-xs-4 col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-xs-4 col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>

您可能需要将所有课程升级到下一个尺寸以获得您想要的内容（例如＆＃34; col-sm-4 col-md-1＆＃34;）

Answer 2

这是因为你使用过col-sm而不是col-xs（对于像手机这样的小屏幕更多）。

试试这个：

<div class="row">
  <div class="col-xs-2">
    <h2>text1</h2>
  </div>

  <div class="col-xs-8">
    <!-- empty -->
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>

或者这个：

<div class="row">
  <div class="col-xs-10">
    <h2>text1</h2>
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>

你可以在这里阅读一个很好的解释：

Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in bootstrap

当我使用少于12个cols时，如何避免将Bootstrap列拆分为行？

2 个答案: