将非响应三列布局转换为引导三列布局

Question

所以我有一个网站使用三列布局，固定宽度为1000px。我想将其转换为引导响应布局。我做的是以下内容：

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-push-2">Main</div>
        <div class="col-lg-2 col-lg-pull-8">Left</div>
        <div class="col-lg-2">Right</div>
    </div>
</div>

我已将@media（min-width：1200px）的容器宽度设置为width：1000px。我现在遇到的问题是我的侧边栏很小而中间栏太宽。将左右col更改为col-lg-3可使柱子变宽，中心柱变小。我知道bootstrap的工作百分比，所以我的问题是，这只是bootstrap如何工作，我必须处理它？或者以某种方式可以设置固定宽度到侧边栏？或者还有其他方法可以实现这一目标吗？

感谢

Answer 1

这就是Bootstrap的工作原理。如果你想根据自己的喜好进行调整，你应该为你的主，左和右div提供一个属于他们自己的类，只需调整你的CSS中的％。

请注意，创建自己的％-width并不能使其响应！我的意思是说你的div会根据浏览器宽度调整大小，从而在手机上形成一个非常瘦的网站。最好是将此解决方案与Bootstrap结合使用，因此只要您的浏览器处于X像素宽度范围内，Bootstrap就会接管，或者编写您自己的@media并根据页面宽度更改您网站的外观。

编辑：当然你也可以尝试覆盖你自己的CSS中的引导程序宽度，但是当你在另一个页面上再次使用相同的col-width时，这可能会导致一些奇怪的事情。