Bootstrap 列在移动视图中未对齐答案

【问题标题】：Bootstrap columns not aligning in mobile viewBootstrap 列在移动视图中未对齐
【发布时间】：2019-09-28 19:42:12
【问题描述】：

所以我为我的网站设计了一个 Bootstrap Grid，在 container-fluid BS 属性下有三列，还有 .row .no-gutters。

这些框在桌面视图中完美对齐，但是，当在手机或平板电脑上查看时，这些框与width:100%; 堆叠在一起，这是完美的，除了它们没有均匀对齐 - 如提供的屏幕截图所示。

我还更改了 @media 属性上的 CSS，应用了相同的 CSS，但删除了填充。

这里是有问题的代码：

 /* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:5px;
  padding-left:5px;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
  padding-right:5px;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
  padding-left:5px;
}
.row{
	margin-top: 20px!important;
	margin-bottom: 20px!important;
	display: block;
	height: auto;
}

.legal_section{
	padding: 20px!important;
	background-color: #F5F5F5!important;
	border: 1px solid #EBEBEB!important;
}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


</head>

<div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-lg-4">
                <div class="well legal_section">
                    <h4>Privacy Policy</h4>
                    <p>Our Privacy Policy explains how we use, collect and protect your data when you use our website.</p>
                    <br/>
                    <a href="../pages/privacy policy.html" class="std_button">Read More</a>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="well legal_section">
                    <h4>Cookie Policy</h4>
                    <p>Our Cookie Policy tells you about the use of cookies and how you can choose which cookies we collect and process.</p>
                    <br/>
                    <a href="../pages/cookie_policy.html" class="std_button">Read More</a>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="well legal_section">
                    <h4>Terms of Use</h4>
                    <p>Our Terms of Use specifies the legal use of our website, what your rights are, and how you can contact us. </p>
                    <br/>
                    <a href="../pages/website-terms-of-use.html" class="std_button">Read More</a>
                </div>
            </div>
        </div>
    </div>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

如果您必须删除 col-**-* 类的填充，则您必须应用相同的左填充和右填充，并且 row 类的边距也应该具有相同的值但减号例如：您的 col-**-* 类左并且右边距是5px，那么你的row的左右边距应该是-5px。

显示我的 sn-p 以获得您的解决方案。

.row.no-gutter [class*='col-'] {
  padding-right:5px;
  padding-left:5px;
}
.row.no-gutter{
  margin-right: -5px !important;
  margin-left: -5px !important;
}
.row{
  margin-top: 20px!important;
  margin-bottom: 20px!important;
  display: block;
  height: auto;
}
.legal_section{
  padding: 20px!important;
  background-color: #F5F5F5!important;
  border: 1px solid #EBEBEB!important;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="row no-gutter">
      <div class="col-lg-4">
        <div class="well legal_section">
          <h4>Privacy Policy</h4>
          <p>Our Privacy Policy explains how we use, collect and protect your data when you use our website.</p>
          <br/>
          <a href="../pages/privacy policy.html" class="std_button">Read More</a>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="well legal_section">
          <h4>Cookie Policy</h4>
          <p>Our Cookie Policy tells you about the use of cookies and how you can choose which cookies we collect and process.</p>
          <br/>
          <a href="../pages/cookie_policy.html" class="std_button">Read More</a>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="well legal_section">
          <h4>Terms of Use</h4>
          <p>Our Terms of Use specifies the legal use of our website, what your rights are, and how you can contact us. </p>
          <br/>
          <a href="../pages/website-terms-of-use.html" class="std_button">Read More</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

【讨论】：

很好，它在演示中完美运行，并且在调整为移动大小时在浏览器预览中运行良好，但发布时它们仍然没有对齐。
你能告诉我已发布内容及其代码的 SS 吗？

【解决方案2】：

问题在于这些样式。

            /* remove spacing between middle columns */
           .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
             padding-right:5px;
             padding-left:5px;
           }
           /* remove right padding from first column */
           .row.no-gutter [class*='col-']:first-child {
             padding-right:5px;
           }

第一个子元素没有左填充，而其余元素有。让一切都一样。

【讨论】：