我需要我的布局位于移动设备或平板电脑的中心。这是我的 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/
最佳答案
如前所述。您应该将所有内容放在 .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
关于html - Bootstrap 3 不在手机和平板电脑上将元素居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29622127/