css - 引导 btn 组未对齐

Question

我对以下代码有疑问；

    <li class="span4">
        <div class="thumbnail">
            <img src="" alt="" />
            <div class="caption">
                <h3>Title</h3>
                <div class="clearfix">
                    <div class="pull-right">
                        <div class="btn-group">
                            <button class="btn btn-success"><i class="icon-thumbs-up"></i></button>
                            <button class="btn btn-danger"><i class="icon-thumbs-down"></i></button>
                            <button class="btn btn-warning"><i class="icon-star-empty"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>

缩略图描述中的按钮如下所示；

我遇到的主要问题是这些有时只会出现损坏。不总是。

它在 JSFiddle 中运行良好，但无论如何它都在这里；http://jsfiddle.net/NsKYH/1/

Answer 1

如果将white-space:nowrap定义为.btn-groupDIV 可能会更好。像这样写：

.btn-group{
  white-space:nowrap;
 }    
button{
 white-space:normal;
}

Answer 2

button我发现一些浏览器和自定义 CSS 存在标签之间的空白问题。尝试：

<div class="btn-group"><button
    class="btn btn-success"><i class="icon-thumbs-up"></i></button><button
    class="btn btn-danger"><i class="icon-thumbs-down"></i></button><button
    class="btn btn-warning"><i class="icon-star-empty"></i></button></div>

或在 CSS （更好的主意）或内联（不是一个好主意）中强制样式：

<div class="btn-group" style="white-space:nowrap;"> ...

您还会发现input-append（等）分组存在此问题。删除 html 标签之间的空格似乎可以解决这个问题。

Answer 3

防止按钮组包装的最简单修复来自briamhunt：

.btn-group {
    display: flex;
}

如今，Flexbox 得到了很好的支持。