Question

有没有办法使用100％的页面宽度同时使用bootstrap柱系统和最大宽度？

有一个例子，我试图在这里做：

＆＃13;

.box-one{
  background-color: red;
  max-width: 200px;
}
.box-two{
  background-color: green;
}
.box-three{
  background-color: red;
  max-width: 200px;
}

＆＃13;

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <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>
  </head>
  <body>
  <div class="row">
    <div class="col-md-3 box-one">
      <p>Test box one</p>
    </div>
    <div class="col-md-6 box-two">
      <p>Test box two</p>
    </div>
    <div class="col-md-3 box-three">
      <p>Test box three</p>
    </div>
   </div>
  </body>
</html>

＆＃13;

在第3个盒子之后有一个空白区域，这是正常的，但是第二个盒子（绿色盒子）有没有办法增加它的宽度，所以不会有任何空白区域？目标是第二个盒子仍然响应。谢谢你的帮助。

Answer 1

首先，您应该在col中使用row，在row或container中使用container-fluid。

完成后，将行更改为display:flex;，并使用col-6

让flex-grow: 1;增长

＆＃13;

.row {
  display: flex;
}

.col-md-6 {
  flex-grow: 1;
}

.box-one {
  background-color: red;
  max-width: 200px;
}

.box-two {
  background-color: green;
}

.box-three {
  background-color: red;
  max-width: 200px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 box-one">
      <p>Test box one</p>
    </div>
    <div class="col-md-6 box-two">
      <p>Test box two</p>
    </div>
    <div class="col-md-3 box-three">
      <p>Test box three</p>
    </div>
  </div>
</div>

＆＃13;

当然，为了使这项工作起作用，你还需要一些额外的工作。

另一种方法是升级到Bootstrap 4，该网格是使用flexbox构建的。

bootstrap col使用最大宽度

1 个答案: