如何为非专用于引导网格的psd使用引导网格？

Question

我的问题与此类似： 如何使静态PSD适应自适应Bootstrap网格

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

假设我得到了一个896 px的psd设计，左侧菜单约占213 px，间距为10 px，其他则占683 px。 我该如何使用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的能力采取进一步的方法。

希望这可以帮助。