按钮组的Bootstrap 4.0 Beta对齐

时间:2017-09-08 02:06:44

标签: css twitter-bootstrap css3 flexbox bootstrap-4

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

enter image description here

使用<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>

1 个答案:

答案 0 :(得分:2)

由于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;
&#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;
&#13;
&#13;