Question

我使用Bootstrap CSS编写了一个Delivery页面的代码，只有几个自定义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视图代码，因为页眉和页脚不应该相关。

自定义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;
}

桌面视图：

移动视图：

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：块和宽度：如果您希望按钮适合列宽，则使用媒体查询的移动设备为100％。

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

带有搜索栏的引导程序无法扩展到移动设备

1 个答案: