Question

我需要将布局放在移动设备或平板电脑的中心位置。这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Cart</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="row center-block">
        <div class="row">
            <div class="row">
                <div class="col col-sm-1">
                    <img class="image" alt="" src="http://i.stack.imgur.com/YKNC5.jpg" />
                </div>
                <div class="col col-sm-11">
                    <div class="row">
                        <div class="row">
                            <h3 class="col col-sm-12">Samsung Galaxy S5</h3>
                        </div>
                        <div class="row">
                            <span class="col col-sm-12">My Products Avaialble online and in stores</span>
                        </div>
                        <div class="row">
                            <span class="col col-sm-12">Seller: My Product</span>
                        </div>
                        <div class="row">
                            <span class="col col-sm-12">Quantity:
                                <input type="number" />
                            </span>
                        </div>                       
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

但这在移动设备上很糟糕。我还给我添加了一个标签。请帮我在移动平板电脑的中心制作物品。 JsBin http://jsbin.com/luxorapowe/1/

Answer 1

如前所述。您应该将所有内容放在.container或.container-fluid中。并且不要将.row直接嵌套到另一个中。

要将内容集中在较小的设备上，只需使用以下媒体查询：

@media only screen and (max-width: 768px) {
  .container-fluid
  {
    text-align: center;
  }
}

请参阅此jsbin例如：http://jsbin.com/pukupejehu/1/edit?html,css,output

Answer 2

我相信你错过了.container类，它将所有内容都集中在一起。并且在行类中不需要中心块。

<div class="container">
    <div class="row">

    </div>
</div>

Bootstrap 3不是移动设备和平板电脑上的物品

2 个答案: