文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >正确地使用Bootstrap的对齐内容之间和堆栈到水平的值

问正确地使用Bootstrap的对齐内容之间和堆栈到水平的值
EN

Stack Overflow用户
提问于 2020-09-26 08:15:20
回答 2查看 224关注 0票数 1

我正在设计一种响应式。我的表单有一个标签、一个输入字段和五个按钮。

我的按钮和输入字段都在col-8下面。

我希望我的按钮被放置在这样的方式：

  1. 它应该开始放置在输入字段的下方和开头。(想象一下在一辆车下有2排)
  2. 两个按钮之间的间距相等。
  3. 在小屏幕上，按钮将显示为堆栈。

这里是关于我想要的东西的截图：

用于普通屏幕

当小屏幕-它应该堆放

这里是我的代码：

​

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container bg-dark col-6" style="margin-top: 2rem;">
      <form>
        <div class="form-group row">
          <label for="id" class="col-4 col-form-label" style="color: white;">id</label>
          <div class="col-8">
            <input id="id" name="id" type="text" class="form-control">
          </div>
        </div>
        <div class="offset-4 form-group row justify-content-between">
          <button type="button" class="btn btn-primary">A</button>
          <button type="button" class="btn btn-warning">B</button>
          <button type="button" class="btn btn-primary">C</button>
          <button type="button" class="btn btn-danger">D</button>
          <button type="button" class="btn btn-info">E</button>
        </div>
        <div class="offset-4 form-group row">
          <div class="col-sm">
            <button type="button" class="btn btn-primary">A</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-warning">B</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-primary">C</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-danger">D</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-info">E</button>
          </div>
        </div>
        <div class="offset-4 form-group row justify-content-between">
          <div class="col-sm">
            <button type="button" class="btn btn-primary">A</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-warning">B</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-primary">C</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-danger">D</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-info">E</button>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

​

我已经试过3次来放置这5个按钮。

  1. 第一，只有row和justify-content-between
  2. 然后- row和col
  3. 最后- row，col和justify-content-between

但他们中的每一个要么跨越输入字段宽度(第一个屏幕截图)，要么与输入字段宽度保持距离(第二个屏幕截图)。

如何正确地将满足justify-content-between和堆栈col的5个按钮正确地放在row中？

一个要求:我想有一个建议--不要过多地使用边距和填充，因为这在所有屏幕大小上都应该是好的。

html
css
bootstrap-4
responsive-design
frontend
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-05-20 11:27:53

您的标记有一些问题。为了避免将来出现这种情况，请阅读Bootstrap网格部分的它是如何工作的部分下的每个点(项目点)。

以下是问题所在的明细：

  • 并不是所有的.row都是直接.container或.col的孩子。因为.row有负边距，所以它需要一个具有水平“沟槽”padding的父级来补偿负边距(或者您可以通过应用mx-0或no-gutters类来禁用沟槽)。
  • 您在.row上应用了.row，这是为.col设计的。这一点很重要，因为通过将它应用到.row中，您会对齐该行中的所有列。
  • 要使用.justify-content-between，不一定需要其他级别的.row +.col，只需要元素上的display: flex，它可以与d-flex类一起应用。

作为另一种解决方案，我将上次的.row示例更改为使用.btn-group，这是一种稍微好一点的UI解决方案，适用于这种类型的操作栏布局。定制的CSS主要用于在移动上将其切换到垂直(也可以通过将.btn-group-vertical应用于它来实现，但它不具有响应性的变体)。

看到它起作用：

​

代码语言：javascript
复制
.custom-btn-group {
  width: 100%;
}

@media(max-width: 767px) {
  .custom-btn-group,
  .vertical-mobile {
    flex-direction: column;
  }
  .custom-btn-group:not(#_) .btn {
    margin-left: 0;
  }
  .custom-btn-group:not(#_) .btn:first-child {
    border-top-right-radius: .25rem;
    border-bottom-left-radius: 0;
  }
  .custom-btn-group:not(#_) .btn:last-child {
    border-bottom-left-radius: .25rem;
    border-top-right-radius: 0;
  }
}
代码语言：javascript
复制
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>


<div class="container">
  <div class="row">
    <form class="bg-dark col-sm-6 py-3">
      <div class="form-group row">
        <label for="id" class="col-sm-3 col-md-4 col-form-label text-white">id</label>
        <div class="col-sm-9 col-md-8">
          <input id="id" name="id" type="text" class="form-control">
        </div>
      </div>
      <div class="form-group row">
        <div class="col offset-sm-3 offset-md-4">
          <div class="d-flex justify-content-between">
            <button type="button" class="btn btn-primary">A</button>
            <button type="button" class="btn btn-warning">B</button>
            <button type="button" class="btn btn-primary">C</button>
            <button type="button" class="btn btn-danger">D</button>
            <button type="button" class="btn btn-info">E</button>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col offset-sm-3 offset-md-4">
          <div class="d-flex justify-content-between vertical-mobile">
            <button type="button" class="btn btn-primary">A</button>
            <button type="button" class="btn btn-warning">B</button>
            <button type="button" class="btn btn-primary">C</button>
            <button type="button" class="btn btn-danger">D</button>
            <button type="button" class="btn btn-info">E</button>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col offset-sm-3 offset-md-4">
          <div class="btn-group custom-btn-group">
            <button type="button" class="btn btn-primary">A</button>
            <button type="button" class="btn btn-warning">B</button>
            <button type="button" class="btn btn-primary">C</button>
            <button type="button" class="btn btn-danger">D</button>
            <button type="button" class="btn btn-info">E</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2020-09-27 09:04:02

​

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- CSS only -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <!-- JS, Popper.js, and jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container bg-dark col-6" style="margin-top: 2rem;">
    <form>
      <div class="form-group row">
        <label for="id" class="col-4 col-form-label" style="color: white;">id</label>
        <div class="col-8">
          <input id="id" name="id" type="text" class="form-control">
        </div>
      </div>
      <div class="row">
        <div class="offset-4 col-8">
          <div class="row justify-content-between" style="margin: 0%; padding: 0%;">
            <div class="col-auto" style="margin: 0%; padding: 0%;">
              <button name="button" type="button" class="btn btn-primary">A</button>
            </div>
            <div class="col-auto" style="margin: 0%; padding: 0%;">
              <button name="button" type="button" class="btn btn-success">B</button>
            </div>
            <div class="col-auto" style="margin: 0%; padding: 0%;">
              <button name="button" type="button" class="btn btn-warning">C</button>
            </div>
            <div class="col-auto" style="margin: 0%; padding: 0%;">
              <button name="button" type="button" class="btn btn-danger">D</button>
            </div>
            <div class="col-auto" style="margin: 0%; padding: 0%;">
              <button name="button" type="button" class="btn btn-primary">E</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

</html>

​

我想提一些对我有用的事情：

  1. 我每次都要为margin: 0%和padding: 0%制作col-auto，如果没有，那么我的屏幕截图中就会出现一个空白。
  2. 我必须把每个button放在col-auto中，然后把每个col-auto放在row中。最后，我将行设置为justify-content-between，当然，margin: 0%和padding: 0%用于消除不必要的空白。
  3. 最后，我把整个过程都用offset-4 col-8包好了，它是用row包装的。
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64075399

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档