html - Bootstrap 3 中的奇怪按钮包装 - 响应式设计

Question

我是 Bootstrap 3 新手，所以这可能就像代码结构问题一样简单。 770 像素以上的一切看起来都很棒，但在 770 像素以下有些东西有点破损。 1.) 搜索按钮不会向左浮动。 2.) 选择菜单需要 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 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%;
    }
}