Итак, у меня есть дизайн Bootstrap Grid для моего веб-сайта, где у меня есть три столбца с атрибутом container-fluid BS, а также .row .no-gutters.
Однако ящики идеально выровнены в представлении рабочего стола,при просмотре на мобильном телефоне или планшете, ящики располагаются с width:100%;, что идеально, за исключением того, что они не выровнены равномерно - как показано на скриншоте.
Я также изменил CSS на @media атрибут, применяя тот же 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>