bootstrap中怎么样使按钮居中

总结一下以下几种方法:
在bs中表现按钮的方法有两种:
1.关于 <a> 元素
 只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。
 
  1. <div class="btn-group btn-group-justified" role="group" aria-label="...">
  2.    ...
  3.  </div>
复制代码

2.关于 <button> 元素
 为了将 <button> 元素用于两端对齐的按钮组中,必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group。大部分的浏览器不能将我们的 CSS 应用到对齐的 <button> 元素上,但是,由于我们支持按钮式下拉菜单,我们可以解决这个问题。
  1. <div class="btn-group btn-group-justified" role="group" aria-label="...">
  2.   <div class="btn-group" role="group">
  3.     <button type="button" class="btn btn-default">Left</button>
  4.   </div>
  5.   <div class="btn-group" role="group">
  6.     <button type="button" class="btn btn-default">Middle</button>
  7.   </div>
  8.   <div class="btn-group" role="group">
  9.     <button type="button" class="btn btn-default">Right</button>
  10.   </div>
  11. </div>
复制代码


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

1.block 没设定宽度是不能 margin auto 来居中的,一个简单的办法是 display: table;
  1. display: table
  2. width: auto
  3. margin-left: auto
  4. margin-right: auto
复制代码
运行代码 复制代码 保存代码 提示:您可以先修改部分代码再运行! power by W3Cfuns.com


2.很直接,用<center></center>
  1. <center><button type="button" class="btn btn-primary" >Primary</button></center>
复制代码


自己试验了一下不好用,文章不好找,先备份一下。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值