html - bootstrap 上的自定义列大小(不影响响应式设计)

我想在我的页面上创建一个非常小的带有 bootstrap 的左侧菜单，如下所示:

<div class="row>
    <div class="col-md-1 col-sm-1 leftMenu"></div>
    <div class="col-md-7 col-sm-7 main"></div>
    <div class="col-md-4 col-sm-4 rightMenu"></div>
</div>

但是 col-md-1 对我的菜单来说太大了。我想要一个等于 50px 的宽度；

我没有找到一个菜单的大小低于最小列的解决方案，而不影响我页面的响应式设计

有人对我的问题有答案吗？

最佳答案

如果您想继续使用 Bootstrap，您可以定义新的列宽，例如0.5/12 和 7.5/12:

col-md-0-5 | col-md-7-5 | col-md-4
col-sm-0-5 | col-sm-7-5 | col-sm-4

如果检查 bootstrap.css 文件，则可以按如下方式定义新的 col-md-0-5 和 col-md-7-5 类:

.col-md-0-5, .col-md-7-5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 992px) {
    .col-md-0-5, .col-md-7-5 {
        float: left;
    }
    .col-md-0-5 {
        width: 4.16666667%;
    }
    .col-md-7-5 {
        width: 62.5%;
    }
}

只需遵循相同的逻辑来定义新的 col-xs-0-5 和 col-xs-7-5 类。

关于html - bootstrap 上的自定义列大小(不影响响应式设计)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35335595/