Question

我已经在Bootstrap 4.0中声明了<div>我用来填充一排水平填充div的按钮。我已经尝试将btn-group元素声明为<buttons>和<a role="button">，但无论哪种方式我尝试，我都会让最左边的按钮不对齐：

使用<a>方法，我正在声明这样的div：

<div class="btn-group btn-group-justified" id="hours-and-location">
  <a href="#" class="btn btn-secondary btn-block" role="button">button</a>
  <a href="#" class="btn btn-secondary btn-block" role="button">button</a>
  <a href="#" class="btn btn-secondary btn-block" role="button">button</a>
</div>

将它们声明为<buttons>，如下所示：

<div class="btn-group btn-group-justified align-self-center" id="hours-and-location">
  <button type="button" class="btn btn-secondary btn-block h-100">Button 2</button>
  <button type="button" class="btn btn-secondary btn-block h-100">Button 2</button>
  <button type="button" class="btn btn-secondary btn-block h-100">Button 3</button>
</div>

我已尝试设置边距，填充，添加！重要的CSS，我已经通过了大量的CSS帖子。我查看了Firefox检测实用程序中的元素，但我不明白为什么它们不一致。

我欢迎其他想法：如何解决这个问题。在一天结束时，我只想要一些按钮来填充div。如果有一个更简单的Bootstrap方式来做到这一点而不会覆盖大量的CSS，我会全力以赴。谢谢你的阅读。

当我输入这个时，我忽略了添加我的CSS并且没有我的CSS就出现问题（所以我浪费了很多时间来调试CSS）。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<br>
<br>
<br>
<section class="container-fluid">
  <div class="row vertical-center">
    <div class="container-fluid">
      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="container-fluid">
        <!-- <div class="row my-auto"> -->
        <div class="row">
          <div class="col-sm-4">

          </div>
          <div class="col-sm-8">
            <div class="btn-group btn-group-justified align-self-center" id="hours-and-location">
              <button type="button" class="btn btn-secondary btn-block h-100">Button 2</button>
              <button type="button" class="btn btn-secondary btn-block h-100">Button 2</button>
              <button type="button" class="btn btn-secondary btn-block h-100">Button 3</button>
            </div>
            <!-- <div class="btn-group btn-group-justified" id="hours-and-location">
          <a href="#" class="btn btn-secondary btn-block" role="button">button</a>
          <a href="#" class="btn btn-secondary btn-block" role="button">button</a>
          <a href="#" class="btn btn-secondary btn-block" role="button">button</a>
        </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

由于btn-block类，垂直对齐已关闭 - 从按钮的所有中删除btn-block。

btn-block适用于button s低于另一个（因此它们之间存在默认 margin-bottom） - 请参阅以下文档摘录：

创建块级按钮 - 跨越a的整个宽度的按钮   parent-by添加.btn-block。

bootstrap-4

同样对于按钮的包装，align-self-center没有任何意义，因为它适用于 flex项目（父项不是flexbox在代码中）。它应该被分配给每个 flex项，或者你可以给algin-items-center类。

见下面的演示：

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<br>
<br>
<br>
<section class="container-fluid">
  <div class="row vertical-center">
    <div class="container-fluid">
      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="container-fluid">
        <!-- <div class="row my-auto"> -->
        <div class="row">
          <div class="col-sm-4">

          </div>
          <div class="col-sm-8">
            <div class="btn-group btn-group-justified align-items-center" id="hours-and-location">
              <button type="button" class="btn btn-secondary h-100">Button 2</button>
              <button type="button" class="btn btn-secondary h-100">Button 2</button>
              <button type="button" class="btn btn-secondary h-100">Button 3</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

按钮组的Bootstrap 4.0 Beta对齐

1 个答案: