Bootstrap 3 不在移动设备和平板电脑上将项目居中答案

【问题标题】：Bootstrap 3 not centering items on mobile and tabletsBootstrap 3 不在移动设备和平板电脑上将项目居中
【发布时间】：2015-06-19 18:07:36
【问题描述】：

我需要我的布局位于移动设备或平板电脑的中心。这是我的 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>

但这在移动设备上是一团糟。我还给我加了一个标签。请帮助我在移动平板电脑上制作中心物品。 JsBinhttp://jsbin.com/luxorapowe/1/

【问题讨论】：

你可以在jsfiddle.net中显示你的代码
@RoySonasish, jsbin.com/luxorapowe/1
不能直接将.row放在.row中
好吧@user123456 ...尝试将<div class="row center-block">替换为<div class="row">。之后，将下一个<div class="row"> 更改为<div class="box"> 并在其中创建另一个<div class="box-content">。至少，为每行 span 和 input 标记添加另一个 <div class="form-group">...

标签： html css twitter-bootstrap responsive-design

【解决方案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

【讨论】：

【解决方案2】：

我相信您缺少 .container 类，它将所有内容居中。并且不需要在行类的中心块中。

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

    </div>
</div>

【讨论】：

我添加了但没有影响
plnkr.co/edit/svEQNHwXNxRsBs54cDk1?p=preview 我认为你应该阅读文档getbootstrap.com/css/#grid