html - 在响应式布局中设置边距

Question

<div class = "row">
  <div class = "col-sm-12 header_site">
     <h1><span class = "header">ABC Company</span></h1>
  </div>
</div>

CSS 代码:

.header_site{
background-color: darkblue;}
.header{
color: white;
margin: 0px 0px 0px 160px;}

在移动版中布局如下:

设置 margin-left: 160px 是问题所在。但我希望 margin-right 在台式计算机中为 160px，如下所示。

Answer 1

您的答案是在您的 CSS 中使用媒体查询，或者更优选地完全忘记左边距并将您的 header 内容包装到一个.container.

为此，请像下面这样构建您的 HTML:

<div class="header_site">
<div class="container">
   <div class="row">
      <div class="col-sm-12">
         <h1><span class="header">ABC Company</span></h1>
      </div>
   </div>
</div>
</div>

通过媒体查询解决问题:

放置以下标签将在桌面 View 中保持边距，但一旦屏幕太小就将其移除(或在此时将边距调整得低一点)

@media (min-width: 991px)
{
   .header { margin: 0 0 0 160px; }
}

您可以在 CSS 中设置多个媒体查询并组合最小值和最大值，如下所示:

@media (min-width: 768px) and (max-width: 991px)
{
   .header { margin: 0 0 0 80px; } /* Your margin is now smaller in tablet view, but returns to the 160 pixels in mobile, not ideal for your situation, but as an example! */
}