Question

当改变浏览器窗口的大小时，我注意到窗口边框和行（红色）之间的填充正在改变，如下所示：

然后，缩小窗口：

我用来制作这个简单例子的代码是：

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>



<div class="container">
<br><br><br><br><br><br><br><br>

  <div class="row" style="background-color: red;margin: 20px;">
  <br>
  </div>

</div>

</body>
</html>

所以，我试图更改类＆＃34;容器＆＃34;，像这样：

<style>

.container {

  padding-right: auto;

  padding-left: auto;

  margin-right: 15px;

  margin-left: 15px;

}

</style>

这次，当我更改浏览器的窗口时左边的填充不会移动，但是右边的填充是不同的并且会改变：

然后缩小窗口：

对所有这些照片感到抱歉，但是图像比解释更好。

谢谢

Answer 1

首先，您需要知道auto不是padding属性的有效值。尝试使用margin: auto作为容器。我在这个小提琴中尝试了你的代码，它运行正常;

https://jsfiddle.net/j7ezbvdq/2/

Answer 2

.container类的想法是将div放在一个固定宽度的中心，如下定义。

@media (min-width: 1200px)
.container {
    width: 1170px;
}

@media (min-width: 992px)
.container {
    width: 970px;
}

@media (min-width: 768px)
.container {
    width: 750px;
}

它也有这样的属性

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

如果检查检查元素，则填充不会减少。这是保证金。

另请注意auto不是填充的有效属性值。

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>

.container {

  padding-right: auto;
  padding-left: auto;
  margin:auto;
}
.row
{
	
	margin:auto;
	border: 8px solid red;

}
</style>

</head>
<body>



<div class="container">
<br><br><br>

  <div class="row">
</div>
</div>
</body>
</html>

适用于各种屏幕稳定调整的简单示例。

Bootstrap：如何在更改窗口大小时稳定容器填充？

3 个答案: