如何使用psd的bootstrap网格不是专门为bootstrap网格制作的？

Question

我的问题与此类似：How to make static PSD fit into Responsive Bootstrap grids

但选定的答案（嵌套网格）使我感到困惑。 （我还不能发表评论，我想也许其他人也会提出更多建议。）

假设我的psd设计为896像素，左侧的菜单大约为213像素，有些间距为10像素，其他的东西为683像素。我如何使用bootstrap网格做类似的事情？我不想要任何固定宽度的列。请详细说明嵌套网格方法（或您可能采用的任何其他方法）。

看图：A是213px，B是896px，其间的间距是10px。

Answer 1

情景1 :(我会做什么） 我会遵循Bootstrap的网格系统，就像你应该使用的1200px主容器一样。这样做可以为您提供2个桌面视图（小型和大型）以及平板电脑和移动视图，用于您希望进行的布局。

这就是它的样子......最小的骨头：

<div class="container">
   <div class="row">
      <div class="col-sm-3">
         <p>Sidebar</p>
      </div>
      <div class="col-sm-1"></div>
      <div class="col-sm-8">
         <p>Main Content</p>
      </div>
  </div>
</div>

JS小提琴：http://jsfiddle.net/tzhben/hrzboLex/

场景2： 使用896px的最大宽度将限制您将看到的不同视口的数量，但它仍将保持响应。我在这里做的是将容器的宽度覆盖到896px并保持所有相同的html / css。

.container {
 width: 896px;
 border: 1px solid;    
}

JS小提琴：http://jsfiddle.net/tzhben/b9Lyfzxd/

两者似乎都有效。如果你注意到孤独的“div class =”col-sm-1“（在html中）为你提供了你正在寻找的差距。根据你操纵CSS的能力，你可以采取进一步的方法。

希望这有帮助。