时间戳

首页 > 解决方案 > 在容器内引导非常简单的 col-12 但不起作用

twitter-bootstrap - 在容器内引导非常简单的 col-12 但不起作用

问题描述

我的问题很简单，我想在 1 行中放置 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 个按钮始终填充半行。没有填写整行，为什么？谢谢。

标签： twitter-bootstrapbootstrap-4

解决方案

代码笔。用 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;在按钮上使用，使它们在大屏幕上充满整个可用空间：

萨斯：

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

推荐阅读