Question

我是一个Bootstrap 3新手，所以这可能就像代码结构问题一样简单。 770px以上的一切看起来都很棒但是有一些东西在770px以下有点破碎。 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规则或应用任何浮点数：如果你关闭它们，按钮类的权利，当屏幕尺寸改变时，按钮将被放置在正确的位置，如果你想要浮动一个元素，也可以在引导程序中无论是向右还是向左，您都可以使用像右拉或左拉这样的类，您不必为此创建单独的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中的奇数按钮包装 - 响应式设计

3 个答案: