css - 使用 bootstrap 和 css 的模块化内容框

Question

我们正在尝试在 bootstrap 中构建一个内容预览网格 - 与您在 medium.com 上看到的非常相似，例如:https://medium.com/100-word-stories

我们目前正在使用这种带有动态 Bootstrap 的结构:

<div class="container">
  <div class="row">
    <div class="span4">CONTENT BOX 1</div>
    <div class="span4">CONTENT BOX 2</div>
    <div class="span4">CONTENT BOX 3</div>
  </row>
  <row>
    <div class="span4">CONTENT BOX 4</div>
    <div class="span4">CONTENT BOX 5</div>
    <div class="span4">CONTENT BOX 6</div>
  </row>
</div>

因此我们考虑使用/调整 Bootstrap “well”类以获得框架良好且填充内容容器 - 类似于 <div class="span4 well"> - 但该类的 css 填充/边距破坏了页面结构。

有没有一种“干净”的方法可以通过 Bootstrap 实现这一点，还是我们最好从头开始构建我们自己的类？在这种情况下 - 你们建议什么是最好/最干净/最简单的方法？

提前致谢!

Answer 1

您使用的是最新版本的 css 框架吗？

<div class="row">
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
</div>
<div class="row">
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
</div>

这对我有用!