bootstrap 按钮居中

2021-02-08 作者：匿名阅读：1461次

前言

本文重点解决boosap按钮居中问题,希望能够帮助到你

总结一下以下几种方法：
在bs中表现按钮的方法有两种：
１.关于 <a> 元素
　只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。
　

<div class="btn-group btn-group-justified" role="group" aria-label="...">
　...
　</div>

２.关于 <button> 元素
　为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group。大部分的浏览器不能将我们的 CSS 应用到对齐的 <button> 元素上，但是，由于我们支持按钮式下拉菜单，我们可以解决这个问题。

<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>

在做项目的过程中遇到要将万恶的按钮居中，顿时脑袋空白了，margin又不能用，还要遵循框架，哎呀，问了下度娘，果然找到几种不错的方法，当然缘由还不是很明白，希望遇到哪个大神给详细讲下理论，好了，看下面的方法吧：

１.block 没设定宽度是不能 margin auto 来居中的，一个简单的办法是 display: table；

display: table
width: auto
margin-left: auto
margin-right: auto

<div class="btn-group" style="display: table; width: auto;margin-left: auto;

margin-right: auto;" ><button type="button" class="btn btn-primary" >Primary</button></div>

本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。

本文地址：http://www.xlkjgs.com/notes/html/3729.html

W 导出为.doc文档

标签方法遇到空白居中包裹缘由

上一篇bootstrapValidator表单自定义验证的案例

下一篇Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

以上内容由本站整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！