使用引导程序和 css 的模块化内容框

Question

我们正在尝试在引导程序中构建内容预览网格 - 与您在 medium.com 上看到的大致相同，例如：https://medium.com/100-word-stories

我们目前正在使用这种带有动态引导的结构：

<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>

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

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

提前致谢！

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>

这对我有用！