使用最大宽度的 bootstrap col

Question

使用最大宽度的 bootstrap col

有没有办法使用 100% 的页面宽度同时使用引导列系统和最大宽度？

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

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

在第三个框之后有一个空白，这是正常的，但是有没有办法让第二个框（绿色的）增加它的宽度，这样就不会有任何空白？目标是第二个框仍然响应。谢谢你的帮助。

Answer 1

Ron*_*den 5

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

有了它后，将行更改为display:flex;并让您col-6使用flex-grow: 1;

.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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

当然，要使这项工作具有响应性，您需要做一些额外的工作。

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

归档时间：	7 年，8 月前
查看次数：	6551 次
最近记录：	7 年，8 月前