css - Bootstrap 3 水平中心按钮组连续

标签 css html twitter-bootstrap twitter-bootstrap-3

我试图在我的页面上水平居中放置两个单选按钮(在一组中)。这是我到目前为止所拥有的。它不完全是中心。它有点偏左。向右拉会使它向右走得太远。我添加了 center-block 和 text-center 但它们根本没有帮助。

有人能帮忙吗?

<div class="row">
    <div class="col-sm-5">&nbsp;</div>
    <div class="col-sm-2">
        <div class="btn-group center-block text-center" data-toggle="buttons">
            <label class="btn btn-default center-block"><input type="radio">All</label>
            <label class="btn btn-default active center-block"><input type="radio">Filtered</label>
        </div>
    </div>
    <div class="col-sm-5">&nbsp;</div>
</div>

最佳答案

你需要有 text-center在父 div 中,而不是居中的 div。

<div class="row">
    <div class="col-sm-offset-5 col-sm-2 text-center">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default center-block"><input type="radio">All</label>
            <label class="btn btn-default active center-block"><input type="radio">Filtered</label>
        </div>
    </div>
</div>

此外,您应该使用 col-sm-offset-5而不是 <div class="col-sm-5">&nbsp;</div> .

Bootply Demo

关于css - Bootstrap 3 水平中心按钮组连续,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25529508/

相关文章:

javascript - Twitter Bootstrap 模式和 Youtube 自动播放并在关闭时停止

html - Bootstrap 并排按钮文本溢出

css - 是否有 CSS 父级选择器?

JavaScript focus() 函数不会将文本区域集中在页面加载上

javascript - 使用自定义数据属性处理事件或将数据绑定(bind)到处理程序?

html - 我不能禁止自动播放音频文件

html - Bootstrap 下拉悬停文本颜色

html - 当列/行是单个时,周围空间在 chrome 和 firefox 中的行为不同

ios - 使用NativeScript为每个 Angular 指定不同的边框半径值

html - 谁能告诉我为什么我的段落链接无法点击?