Question

是否可以使用bootstrap创建10列布局？ col-md-1给出12，col-md-2给出6，但我需要10.我怎样才能实现呢？这有什么css“hacks”吗？

我正在考虑在彼此旁边粘贴2 5个列网格（来自this问题/答案），但我不确定如何处理它。

Answer 1

BOOTSTRAP 3： 如果您想要全宽，可以使用this aproach。

但不是20％（1/5 * 100％），你必须使用：10％：

＆＃13;

.col-xs-1-10,
.col-sm-1-10 {
  position: relative;
  min-height: 1px;
}

.col-xs-1-10 {
  width: 10%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-1-10 {
    width: 10%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-1-10 {
    width: 10%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-1-10 {
    width: 10%;
    float: left;
  }
}

＆＃13;

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-1-10">
    1
  </div>
  <div class="col-xs-1-10">
    2
  </div>
  <div class="col-xs-1-10">
    3
  </div>
  <div class="col-xs-1-10">
    4
  </div>
  <div class="col-xs-1-10">
    5
  </div>
   <div class="col-xs-1-10">
    6
  </div>
    <div class="col-xs-1-10">
    7
  </div>
  <div class="col-xs-1-10">
    8
  </div>
  <div class="col-xs-1-10">
    9
  </div>
  <div class="col-xs-1-10">
    10
  </div>
</div>

＆＃13;

BOOTSTRAP 4： 使用this aproach。

Answer 2

就像你链接的问题/答案一样，创建10列（而不是5列），第一列有这样的偏移量：

div[class^="col-xs-1"] {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-xs-1 col-xs-offset-1">1</div>
    <div class="col-xs-1">2</div>
    <div class="col-xs-1">3</div>
    <div class="col-xs-1">4</div>
    <div class="col-xs-1">5</div>
    <div class="col-xs-1">6</div>
    <div class="col-xs-1">7</div>
    <div class="col-xs-1">8</div>
    <div class="col-xs-1">9</div>
    <div class="col-xs-1">10</div>
</div>

希望这是你的目标。

Answer 3

我创建了一个10列引导程序布局，使用了10％的选项随意使用 https://github.com/markroze/boostrap_10_column

Answer 4

实际上，我们可以使用Bootstrap和Sass的源代码自定义网格系统中列的长度。 Read here

首先，创建一个名为myBootstrap.scss的scss文件，然后键入：

$grid-columns: 10;

接下来，download的Bootstrap源代码，import放在scss文件中：

@import "bootstrap-4.3.1/scss/bootstrap" // bootstrap.scss is the file you need to import.

然后，在myBootstrap.scss中找到它：

$grid-columns: 10;

@import "bootstrap-4.3.1/scss/bootstrap";

最后，安装Sass并在命令行中将其编译到myBootstrap.css中，或者您可以按照自己的方式进行操作：

sass myBootstrap.scss myBootstrap.css

现在，只需将myBootstrap.css替换为原始的Bootstrap CSS：

<link rel="stylesheet" href="myBootstrap.css">

完成。您可以在Theming Bootstrap

中阅读更多内容

使用bootstrap创建一个包含10列的网格

4 个答案: