css - 移动设备上的 Bootstrap Wordwrap 问题

Question

我有一个标签 (#linkDiv)，一旦“解锁”，它就会变成一个按钮。而作为标签，文本比按钮长，所以需要换行。我已经做了 white-space:normal; word-wrap: break-word;断字:正常；

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

(没有足够的代表来嵌入图像:)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;
}