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