Bootstrap 移动设备上的自动换行问题

Question

我有一个标签(#linkDiv)，它变成了一个按钮'unlocked.'而作为一个标签，文本比按钮长，所以它需要换行。我已经做了 white-space:normal; word-wrap: break-word; word-break: normal;

这适用于宽屏幕和中屏幕，但在移动屏幕尺寸上测试时，该行笨拙地将整个标签换到下一行。

（没有足够的代表嵌入图像:) http://i.imgur.com/DfCp6lw.jpg

求助！

html:

<div class="container">
    <div class="row">
        <div id="pickCoins" class="col-sm-4">
            ...(other code for coins, etc)...
            <div id="buttonRow" class="row">
                <div id="rulesDiv" class="col-sm-4 btn btn-primary">Rules</div>
                <div id="exampleDiv" class="col-sm-4 btn btn-info">Examples</div>
                <div id="linkDiv" class="col-sm-4 label label-warning">
                    Unlock theory link in <span class="badge" id="unlockLink">5</span>
                </div>
            </div>
        </div>
    </div>
</div>

css:

#buttonRow div.col-sm-4 {
    width:30%;
    margin:0 1%;
    white-space:normal;
    word-wrap: break-word;
    word-break: normal;
}

Answer 1

试试这个

HTML

<div class="container">
    <div class="row">
        <div id="pickCoins" class="col-sm-4">
            ...(other code for coins, etc)...
            <div id="buttonRow" class="row">
                <div id="rulesDiv" class="col-xs-4 btn btn-primary">Rules</div>
                <div id="exampleDiv" class="col-xs-4 btn btn-info">Examples</div>
                <div id="linkDiv" class="col-xs-4 label label-warning">
                    Unlock theory link in <span class="badge" id="unlockLink">5</span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#buttonRow div.col-xs-4 {
    width: 30%;
    margin: 1.5%;
    white-space: normal;
    word-wrap: break-word;
    word-break: normal;
}

Bootstrap 移动设备上的自动换行问题

Bootstrap Wordwrap issue on Mobile

css

mobile

word-wrap

twitter-bootstrap