Bootstrap调整列

Question

我正在尝试创建货币换算工具。我的问题是，当我减小窗口的宽度时，行会很快崩溃。我希望他们永远保持成比例。

https://jsfiddle.net/a4bz0x4m/

如何解决此问题？

<div class="row">
    <div class="col-sm-12">

        <a id="selectCurrency-button" class="ui-selectmenu ui-selectmenu-dropdown">
        <span class="ui-selectmenu-status">
            <span>
                <div class="flag usd"></div>
                <span class="ui-selectmenu-item-content">
                    <span class="currency-name">United States Dollars</span>
                    <span class="currency-code">$ USD</span>
                </span>
            </span>
        </span>
            <span class="ui-selectmenu-icon"></span>
        </a>

    </div>


</div>

<div class="row">

    <div class="col-sm-5">
        <label>Australian Dollars</label>
        <div class="input-wrapper">
            <input id="inputCurrencyFrom" type="text" maxlength="8">
            <div class="flag aud"></div>
            <span class="currency-code ng-binding">AUD</span>
        </div>
    </div>

    <div class="col-sm-2 equal-sign">=</div>

    <div class="col-sm-5">

        <label>United States Dollars</label>
        <div class="input-wrapper">
            <input id="inputCurrencyTo" type="text" maxlength="8">
            <div class="flag usd"></div>
            <span class="currency-code ng-binding">USD</span>
        </div>

    </div>
</div>

以下是我想要实现的目标示例：http://www.nab.com.au/personal/international/travel/foreign-exchange-rates

Answer 1

您应该在元素上使用col-xs-*类。像：

<div class="col-xs-5">
        <label>Australian Dollars</label>
        <div class="input-wrapper">
            <input id="inputCurrencyFrom" type="text" maxlength="8">
            <div class="flag aud"></div>
            <span class="currency-code ng-binding">AUD</span>
        </div>
    </div>

    <div class="col-xs-2 equal-sign">=</div>

    <div class="col-xs-5">

        <label>United States Dollars</label>
        <div class="input-wrapper">
            <input id="inputCurrencyTo" type="text" maxlength="8">
            <div class="flag usd"></div>
            <span class="currency-code ng-binding">USD</span>
        </div>

    </div>

Answer 2

对较小的设备使用col-xs- *类。您只能为sm和lg类设置媒体查询

，将计算器宽度设置为600px

@media (min-width: 768px) {
.calculator { width: 600px; margin: 0 auto;}
}

Updated Fiddle