Question

我在我的网页上有这个代码，我用Bootstrap制作了它。

<div class="row">
  <div class="col-md-11">
    Here I have content
  </div>
  <div class="col-md-1">
    Here I have content
  </div>
</div>

我需要这个专栏，第一列要小一些，10.5大小，第二列要大一些，1.5大小。我可以用CSS做宽度吗？你能帮我解决这个问题吗？

由于

Answer 1

Bootstrap没有直接提供部分列。

您可以重写样式表以对不同数量的列（即24）进行操作。

customize页面可让您指定不同数量的列并为您生成样式表。

或者，您可以从Git查看Bootstrap并将the variables file修改为相同的效果。

Answer 2

只需创建自己的断点：

@media (min-width: 992px) {
    col-md-10-5 {
        width: 9.523809523809524%; // 100 / 10.5
    }

    col-md-1-5 {
        width: 66.666666666%; // 100 / 1.5
    }
}

替代您可以使用Bootstrap generator将网格大小增加到24列而不是12列。

Answer 3

Bootstrap为您提供通用组件。我认为bootstrap行和列通常设计为包含不同的网站部分或不同的功能（例如右栏包含最新的新闻源和主体与当前文章）

我猜你正在尝试构建自己的组件/标记，不应该被bootstraps行和列分割。我建议为此编写自己的CSS。

<div> <!--some container (e.g. bootstrap container or column)-->
  <div class="my-component">
    <div class="main-part"></div>
    <div class="additional-part"></div>
  </div>
</div>

.my-component {
  /*something*/
}
.my-component > .main-part {
  width: 600px;
  /*some margin or padding*/
}
.my-component > .additional-part {
  width: 200px;
  /*some margin or padding*/
}

如有必要，请提供媒体查询。我建议不要覆盖框架网格系统。

如何在Bootsrap中制作更大更小的色谱柱？

3 个答案: