2

次のコードに問題があります。

    <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/

4

3 に答える 3

2

ボタン グループのラップを防止するための最も簡単な修正は、brianmhunt によるものです。

.btn-group {
    display: flex;
}

Flexbox は最近かなりよくサポートされています。

于 2015-04-17T16:34:45.773 に答える
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タグ間のスペースを削除すると、これが修正されるようです。

于 2012-08-07T11:08:10.600 に答える