Question

我正在尝试使用bootstrap内联块的四个按钮，直到大小为768px。在1199它们彼此相撞但我希望它们保持间隔，并且不会相互下降直到768px。

如何在1200px下将它们并排放置？我的自动落在1199px以下。

<div id="searchoptions">
        <div class="col-lg-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="accountNumber" name="accountNumber">PROPERTY ID</button>
        </div>
        <div class="col-lg-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="name" name="name">OWNER NAME</button>
        </div>
        <div class="col-lg-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="location" name="location">PROPERTY ADDRESS</button>
        </div>
        <div class="col-lg-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="billingAddress" name="billingAddress">BILLING ADDRESS</button>
        </div>
    </div>

@media (max-width: 768px) {
    .btn-u,.btn-group {
        width:100%;
    }
}

@media (min-width: 769px) and (max-width: 1199px){
    .btn-u {
        display:inline-block;
    }
}

Answer 1

使用col-sm-3代替......

    <div id="searchoptions">
        <div class="col-sm-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="accountNumber" name="accountNumber">PROPERTY ID</button>
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="name" name="name">OWNER NAME</button>
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="location" name="location">PROPERTY ADDRESS</button>
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="billingAddress" name="billingAddress">BILLING ADDRESS</button>
        </div>
    </div>

http://www.codeply.com/go/mbCCxpDjrK

按钮内联块使用自举网格系统到某个px

1 个答案: