我已经在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>
答案 0 :(得分:2)
由于btn-block
类,垂直对齐已关闭 - 从按钮的所有中删除btn-block
。
btn-block
适用于button
s低于另一个(因此它们之间存在默认 margin-bottom
) - 请参阅以下文档摘录:
创建块级按钮 - 跨越a的整个宽度的按钮 parent-by添加.btn-block。
同样对于按钮的包装,align-self-center
没有任何意义,因为它适用于 flex项目(父项不是flexbox
在代码中)。它应该被分配给每个 flex项,或者你可以给algin-items-center
类。
见下面的演示:
<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;