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

Question

我想在我的页面上创建一个非常小的带有 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 的宽度；

我找不到一个解决方案来使菜单的尺寸小于最小列，同时不影响我页面的响应式设计

有人能回答我的问题吗？

Answer 1

如果您想继续使用 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 类即可。