Question

我的问题很简单，我想在一行中放置4个按钮，它可以在PC上运行，但不能在手机上运行：

    <div class="container">
  <div class="row text-center">
    <div class="col-lg-12 col-md-12 col-xs-12">
      <button class="btn btn-theme">Scores</button>
      <button class="btn btn-theme">With Lifetime Income</button>
      <button class="btn btn-theme">Without Lifetime Income</button>
      <button class="btn btn-theme">Bank</button>
    </div>
  </div>
</div>

如您所见，这4个按钮始终填充在半行中。没有填满整行，为什么？谢谢。

Answer 1

Codepen。用div包裹按钮，并在定义的容器上应用以下CSS：display:flex;和justify-content: space-evenly;。

.custom-cont {
  display:flex;
  justify-content: space-evenly;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>



<html>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="custom-cont">
          <button class="btn btn-primary">Scores</button>
          <button class="btn btn-primary">With Lifetime Income</button>
          <button class="btn btn-primary">Without Lifetime Income</button>
          <button class="btn btn-primary">Bank</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

另外，您可以在按钮上使用flex: 1;，以使它们在大屏幕上显示全部可用空间：

SASS：

.custom-cont {
  display:flex;
  justify-content: space-evenly;
  
  button {
    flex: 1;
  }
}

在容器内引导非常简单的col-12，但无法正常工作

1 个答案: