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

Question

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

<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-lg-3 会使列变宽，中心列变小。我知道引导程序适用于百分比，所以我的问题是，这就是引导程序的工作方式，我必须处理它吗？或者是否可以为侧边栏设置固定宽度？还是有其他方法可以做到这一点？

谢谢

Answer 1

这就是 Bootstrap 的工作原理。如果你想根据自己的喜好调整它，你应该给你的 Main、Left 和 Right div 一个自己的类，并在你的 CSS 中调整 %。

请注意，创建自己的 %-width 不会使其响应！我的意思是你的 div 会根据浏览器的宽度调整大小，导致手机上的网站非常瘦。最好将此解决方案与 Bootstrap 结合起来，这样当您的浏览器宽度低于 X 像素时，Bootstrap 就会接管，或者编写您自己的 @media 并根据页面宽度更改您网站的外观。

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