如何使用 Bootstrap 将按钮居中对齐 [英] How to align button to center using Bootstrap

查看：223
本文介绍了如何使用 Bootstrap 将按钮居中对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 Bootstrap 创建了一个磁贴.在磁贴内部，靠近底部的位置我想要磁贴的三个按钮(开始、中间和结束).

我制作了开始和结束按钮，但使用了两个带有 pull-left 和 pull-right 类的 div 标签.现在我想要的是放置中间按钮.

这是我的部分代码和屏幕截图:

<div class="pull-left"><button class="btn btn-primary btn-sx" type="button">确认</button>
<!-- 我想要另一个按钮，在磁贴的中心--><div class="pull-right"><button class="btn btn-primary btn-xs pull-right" type="button">Decline</button>

解决方案

Bootstrap 最强大的功能之一是嵌套 row 元素.每个 col-* 容器内部可以有另一个 row ，然后提供另一组完整的 12 个 col 空格:

<div class="row"><div class="col-xs-4"><button class="btn btn-primary btn-sx" type="button">确认</button>
<div class="col-xs-4"><button class="btn btn-primary btn-xs" type="button">中间按钮</button>

<div class="col-xs-4"><button class="btn btn-primary btn-xs" type="button">Decline</button>

我不确定你的 pull-* 类是如何工作的，但是使用 Bootstrap 的内置网格系统你应该能够摆脱这些.

不要错过关于嵌套列的引导程序指南，因为它提供了更多信息比这个答案.

I have created a tile using Bootstrap. Inside the tile, near to the bottom I want three buttons (start, middle and end) of the tile.

I made the start and end buttons but using two div tags with pull-left and pull-right classes. Now what I want is to place the middle button.

Here's a part of my code and a screenshot:

<div class="col-lg-12">
    <div class="pull-left">
        <button class="btn btn-primary btn-sx" type="button">Confirm</button>
    </div>

    <!-- I want another button here, center to the tile-->

    <div class="pull-right">
        <button class="btn btn-primary btn-xs pull-right" type="button">Decline</button>
    </div>
</div>

解决方案

One Bootstrap's most powerful features is nesting row elements. Every col-* container can have another row inside it, which then provides another full set of 12 col spaces:

<div class="col-lg-12">
    <div class="row">
        <div class="col-xs-4">
            <button class="btn btn-primary btn-sx" type="button">Confirm</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Middle Button</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Decline</button>
        </div>
    </div>
</div>

I'm not sure how your pull-* classes exactly work, but using Bootstrap's built-in grid system you should be able to get rid of those.

Don't miss the Bootstrap guide on nesting columns, as it provides way more information than this answer.

这篇关于如何使用 Bootstrap 将按钮居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆