html - Bootstrap with Search Bar 不扩展到移动设备

Question

我使用 Bootstrap CSS 编写了交付页面的代码，只有几个自定义 CSS 类(它们都与着色等有关，没有定位)。我想知道为什么它在桌面上看起来很好但不能很好地扩展到移动设备，在使用 Bootstrap 之前我没有遇到过此类问题。

知道我哪里出错了吗？我已经复制了下面的 HTML。

<div class="container content">
    <div class="row">
        <h2><u>Delivery</u></h2>
    </div>
    <div class="row">
        <div class="col-md-6">
            <form class="form">
                <md-input-container>
                    <label>Address/Restaurant</label>
                    <input g-places-autocomplete options="autocompleteOptions" ng-model="vm.place"/>
                </md-input-container>
            </form>
        </div>
        <div class="col-md-1">
            <h3>OR</h3>
        </div>
        <div class="col-md-5">
            <md-button class="md-raised currentloc-btn" ng-click="vm.useCurrentLocation()">
                <div class="green-btn">
                    Use Current Location
                </div>
            </md-button>
        </div>
    </div>
    <div ng-click="vm.selectOrder()" ng-repeat="order in vm.orders">
        <div class="row">
            <div class="col-md-4">{{order.restaurant}}</div>
            <div class="col-md-3 col-md-offset-5">Bounty: {{order.bounty}}</div>
        </div>
        <div class="row">
            <div class="col-md-6">{{order.address}}</div>
            <div class="col-md-3 col-md-offset-3">{{order.distance}} miles</div>
        </div>
        <div class="row">
            <div class="col-md-4">{{order.shortOrder}}</div>
            <div class="col-md-3 col-md-offset-5">Needs by: {{order.deliverTime}}</div>
        </div>
        <hr ng-if="vm.orders.length > 1">
    </div>
</div>

注意:它在 Angular 中，所以我只是复制了正文 UI View 代码，因为页眉和页脚不应该相关。

自定义 CSS 低于每个请求。

.content {
    width: 1000px;
    padding: 80px;
}

.deliver-input {
    background-color: #f2f2f2; 
}

.currentloc-btn {
    padding: 0px;
    margin-top: 15px;
    background-color: #4CAF50;
    height: 100%;
    width: 100%;
    position: absolute;
    text-align: center;
}

.green-btn {
    background-color: #4CAF50;
    color: white;
} 

桌面 View :

移动 View :

Answer 1

每行需要定义 12 列。

例如，这个:

<div class="row">
    <h2><u>Delivery</u></h2>
</div>

应该是这样的:

<div class="row">
    <div class="col-md-12">
     <h2><u>Delivery</u></h2>
    </div>
</div>

如果您希望按钮适合列宽，则使用媒体查询将按钮的 css 设置为 display:block 和 width:100% for mobile。

最后，不要在容器上设置固定宽度。除非您使用 Sass 或 LESS 版本，否则最好不要使用容器，因为网格有一堆依赖于灵活宽度的 css 类。如果您想将内容设置得比 Bootstrap 网格更宽，请使用 Sass/Less 版本并调整列宽和/或间距，然后重新编译。