我正在使用Bootstrap 3构建网站,并且页面上有多个小型div。我想控制桌面视图的大小,并使它们成为移动视图的屏幕的整个宽度。

这就是我的想法:


我尝试将每个小div放入一列中,然后将宽度设置为100%,但这会给我以下结果:

我已经很长时间没有使用引导程序了,所以我不确定要寻找什么。我浏览了w3学校网站,发现了有关box-sizing的内容,但是它没有达到我上面的描述。

问题here似乎与我的相似,但是我不太理解答案,也不想添加到一个旧问题中。

我的问题是,我怎样才能达到这种效果?

感谢您的任何帮助!

最佳答案

使用col-md-3类将容器分为4列。 col-md-*定位的屏幕尺寸大于小型设备。

在此处了解有关网格系统的更多信息:Bootstrap Grid



[class^=col] {
  background: tomato;
  color: white;
  font-weight: bold;
  /* Below properties used to create margin between the columns */
  background-clip: padding-box;
  border: 5px solid transparent;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-md-3">
      1
    </div>
    <div class="col-md-3">
      2
    </div>
    <div class="col-md-3">
      3
    </div>
    <div class="col-md-3">
      4
    </div>
  </div>
</div>

关于html - 适用于台式机的小Div,适用于移动设备的全宽Div( bootstrap ),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31495599/

10-12 12:49
查看更多