如何使一列占用尽可能多的空间而不干扰其他列

Question

使用 Bootstrap v5.3，我希望第一列扩展到可能的最大尺寸，而其他列与该列中最宽的单元格一样宽。下面我画了一个例子：

当前行为。请注意，最后一列单元格右侧有额外的空间。

期望的行为

如何在不使用 CSS 的情况下仅使用 Bootstrap 类来理想地完成此操作？

Answer 1

在 Bootstrap 中，网格系统基于 12 列布局。

您可以按照以下示例设置第一列的最大宽度和其余列的最小宽度。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container-fluid">
    <h1>Hello World!</h1>
    <p>Resize the browser window to see the effect.</p>
    <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
    <div class="row">
      <div class="col-lg-8" style="background-color:lavender;">.col-sm-4</div>
      <div class="col-lg-2" style="background-color:lavenderblush;">.col-sm-4</div>
      <div class="col-lg-2" style="background-color:lavender;">.col-sm-4</div>
    </div>
    <div class="row">
      <div class="col-lg-8" style="background-color:lavender;">.col-sm-4</div>
      <div class="col-lg-2" style="background-color:lavenderblush;">.col-sm-4</div>
      <div class="col-lg-2" style="background-color:lavender;">.col-sm-4</div>
    </div>
    <div class="row">
      <div class="col-lg-8" style="background-color:lavender;">.col-sm-4</div>
      <div class="col-lg-2" style="background-color:lavenderblush;">.col-sm-4</div>
      <div class="col-lg-2" style="background-color:lavender;">.col-sm-4</div>
    </div>
    <div class="row">
      <div class="col-lg-8" style="background-color:lavender;">.col-sm-4</div>
      <div class="col-lg-2" style="background-color:lavenderblush;">.col-sm-4</div>
      <div class="col-lg-2" style="background-color:lavender;">.col-sm-4</div>
    </div>



  </div>

</body>

</html>

如何使一列占用尽可能多的空间而不干扰其他列

问题描述投票：0回答：1

1个回答

最新问题

如何使一列占用尽可能多的空间而不干扰其他列

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1