首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 小程序开发 服务器

bootstrap

热门: ASP.NET PHP编程 ASP编程 JSP编程

bootstrap 按钮居中

来源:未知 发布时间:2017-12-18
总结一下以下几种方法:
在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
<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>

上一篇:bootstrap 图片居中

下一篇:没有了

频道精选

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 小程序开发 | 服务器 |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版