Question

我有一个标签（#linkDiv），它会在解锁后变成一个按钮。＆＃39;虽然作为标签，文本比按钮长，所以它需要包装。我已经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;
}

Mobile上的Bootstrap Wordwrap问题

1 个答案: