Question

我想知道有什么办法在使用lanscape手机时添加网格。即时通讯使用bootstrap v3

继承我的代码

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
  <div class="card m-15">
    <div class="card-top">
      <img src="img/1.jpg">
    </div>
    <div class="card-caption">
      <h6 class="text-center uppercase bold">chocolate chip cookies</h6>
      <p>by <a href="#">lipsum</a>
      </p>
      <div class="tag">
        <a href="#">lipsum</a>,<a href="#"> lipsum</a>
      </div>
    </div>
  </div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
  <div class="card m-15">
    <div class="card-top">
      <img src="img/1.jpg">
    </div>
    <div class="card-caption">
      <h6 class="text-center uppercase bold">chocolate chip cookies</h6>
      <p>by <a href="#">lipsum</a>
      </p>
      <div class="tag">
        <a href="#">lipsum</a>,<a href="#"> lipsum</a>
      </div>
    </div>
  </div>
</div>

在potraint模式下媒体xs的结果很好。但是在横向模式下它占据了很大的空间。

当我只在横向模式下使用时，我可以从col-xs-12更改为col-xs-6吗？

Answer 1

如果我理解你想要正确做什么，我认为实现这一目标的最简单方法是使用媒体查询。使用CSS中的媒体查询，您可以检测窗口宽度何时发生变化，并相应地调整属性。不使用javascript就无法添加或删除类，因此我们无法将col-xs-12更改为col-xs-6

我要做的第一个更改是在你的div中添加一个行类：

＆LT; div class =“row col-lg-3 col-md-3 col-sm-6 col-xs-12”＆gt;内容＆lt; / div＆gt;

然后我们将使用媒体查询来查看屏幕宽度何时被更改（这将在外部CSS文件中）。

@media (min-width: 400px) {
  .row {
    width: 60%;
    margin-left: 20%;
  }
}

这表示当我们的窗口宽度至少为400px时，我们将为行div提供60％的宽度，并给它一个20％的边距，以便居中。

Here is an example I made

在landscape bootstrap3时添加网格

1 个答案: