Bootstrap系列 -- 33. 等分按钮

简介:   等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名. 首页 产品展示 案例分析 联系我们 ...

 

  等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名.

<div class="btn-wrap">
    <div class="btn-group btn-group-justified">
    <a class="btn btn-default" href="#">首页</a>
    <a class="btn btn-default" href="#">产品展示</a>
    <a class="btn btn-default" href="#">案例分析</a>
    <a class="btn btn-default" href="#">联系我们</a>
  </div>
</div>

<div class="container-fluid">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1">

                <div class="btn-group btn-group-justified">
                    <a class="btn btn-default" href="#">首页</a>
                    <a class="btn btn-default" href="#">产品展示</a>
                    <a class="btn btn-default" href="#">案例分析</a>
                    <a class="btn btn-default" href="#">联系我们</a>
                </div>


            </div>
        </div>
</div>

 

相关文章
|
11月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
86 1
|
12月前
|
前端开发 JavaScript 容器
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
5月前
|
前端开发
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
|
11月前
|
前端开发
如何去掉bootstrap按钮边框
如何去掉bootstrap按钮边框
|
12月前
|
前端开发 容器
|
12月前
|
前端开发 容器
|
12月前
|
前端开发 JavaScript
|
11月前
|
前端开发
bootstrap table点击修改按钮给弹框赋值
bootstrap table点击修改按钮给弹框赋值
46 0
|
11月前
|
前端开发
Bootstrap纯CSS3箭头按钮样式
Bootstrap纯CSS3箭头按钮样式
171 0