Bootstrap 中的奇数按钮换行 3 - 响应式设计

Question

我是 Bootstrap 3 新手，所以这可能和代码结构问题一样简单。 770 像素以上的一切看起来都很棒，但在 770 像素以下有些东西有点破损。 1.) 搜索按钮不会向左浮动。 2.) Select 菜单需要 100% 宽度。堆叠菜单很好。

https://jsfiddle.net/nataliehatter/p55j2sp2/

HTML

<div class="well" style="padding:10px;">
                 <h5>Search Businesses</h5>
    <form class="form-inline">
    <label class="sr-only" for="selectLocation">Select Location</label>
    <select class="form-control searchSelect" id="selectLocation">
        <option selected="selected" value>Select Location</option>
        <optgroup label="U.S. Regions">
            <option value="R70">Atlantic</option>
        </optgroup>
        <optgroup label="U.S. States">
            <option value="1">Alabama</option>
        </optgroup>
    </select>
    <label class="sr-only" for="selectIndustry">Select Industry</label>
    <select class="form-control searchSelect" id="selectIndustry">
        <option selected="selected" value>Select Industry</option>
    </select>
    <label class="sr-only" for="selectIndustrySegment">Select Industry Segment</label>
    <select class="form-control searchSelect" id="selectIndustrySegment">
        <option selected="selected" value>Select Industry Segment</option>
    </select>
    <button type="submit" class="btn btn-success searchBusBtn">Search Businesses</button>
</form>
</div>

CSS

 .form-control.searchSelect {
            width:25%;
            margin-right:5px;
        }
    .searchBusBtn {
        float:right;
    }
        @media screen (max-width: 768px;) {
            .form-control.searchSelect {
                width:auto;
            }
            .searchBusBtn {
                float:left;
            }
        }

Answer 1

无需使用@media 规则或将任何 float:right 应用到按钮 class 如果您取消这些，按钮将在屏幕尺寸改变时放置在正确的位置，同样在bootstrap 如果你想让一个元素向右或向左浮动，你可以使用像 pull-right 或 pull-left 这样的 classes 你不必创建一个单独的 css 文件，希望对你有帮助。

Answer 2

这对我有用：

@media screen (max-width: 768px) {

有一个错误的“;”。

Answer 3

从

更改您的媒体查询

@media screen (max-width: 768px;)

到

@media screen and (max-width:768px)

CSS 中的以下代码是您在布局中需要的代码： JsFiddle-Update 2

.form-control.searchSelect {
    width:25%;
    margin-right:5px;
}
.searchBusBtn {
    float:right;
}
@media screen and (max-width:768px) {
    .form-control.searchSelect {
        width:100%;
        margin:5px 0 0 0;
    }
    .searchBusBtn {
        float:left;
        margin:10px 0 0 0;
    }
    .well {
        float:left;
        width:100%;
    }
}

Bootstrap 中的奇数按钮换行 3 - 响应式设计

Odd Button wrapping in Bootstrap 3 - Responsive Design

html

css

twitter-bootstrap-3