Question

我正在为移动和桌面尺寸使用响应式网格布局。我的目标是将页脚分成两行，并在它们之间添加一条适合整个屏幕大小的线。但是我有一个容器类，其桌面大小为 max-width：1700px ，所以为了实现我的目标，我创建了一个类，中间行 with max-width：none （还有初始）但仍继承容器的最大宽度。这是我的代码

/********CSS*******/
.container{
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1170px;
}

@media(min-width: 48em){
   .container > .intermediate-line{
       max-width:none;
       border-top: solid 1px;  
   }
}
/******************/

/*******HtML*******/
<footer class="background-primary">
<div class="container">
  <div class="row">
    <div class="col-1-4">logo</div>
    <div class="col-1-4">address</div>
    <div class="col-1-4">Phone Number</div>
    <div class="col-1-4">Social Media</div>
  </div>

  <div class="intermediate-line"></div> 

  <div class="row">
    <div class="col-1-4">copyright</div>
    <div>Privacy Policy</div>
    <div>Terms of Use</div>
  </div>
</div>

Answer 1

只需制作两个容器，最大宽度为100％，无论容器宽度如何，它都会伸展到整个屏幕

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1170px;
}
.intermediate-line {
  max-width: 100%;
  border-top: 1px solid;
 }
.containerx {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 70px;
}
.intermediate-linex {
  max-width: auto;
  border-top: 1px solid;
 }
.containery {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1170px;
}
.background-primaryy
{max-width: 180px;}
.intermediate-liney {
  max-width: initial;
  border-top: 1px solid;
 }

<footer class="background-primary">
  <div class="container">
    <div class="row">
      <div class="col-1-4">logo</div>
      <div class="col-1-4">address</div>
      <div class="col-1-4">Phone Number</div>
      <div class="col-1-4">Social Media</div>
    </div>
  </div>
  <div class="intermediate-line"></div>
  <div class="container">
    <div class="row">
      <div class="col-1-4">copyright</div>
      <div>Privacy Policy</div>
      <div>Terms of Use</div>
    </div>
  </div>
  </footer>

<br><br>
<footer class="background-primaryx">
  <div class="containerx">
    <div class="row">
      <div class="col-1-4">logo</div>
      <div class="col-1-4">address</div>
      <div class="col-1-4">Phone Number</div>
      <div class="col-1-4">Social Media</div>
    </div>
 
  <div class="intermediate-linex"></div>
 
    <div class="row">
      <div class="col-1-4">copyright</div>
      <div>Privacy Policy</div>
      <div>Terms of Use</div>
    </div>
  </div>
  </footer>
<br><br>
<footer class="background-primaryy">
  <div class="containery">
    <div class="row">
      <div class="col-1-4">logo</div>
      <div class="col-1-4">address</div>
      <div class="col-1-4">Phone Number</div>
      <div class="col-1-4">Social Media</div>
    </div>
 
  <div class="intermediate-liney"></div>
 
    <div class="row">
      <div class="col-1-4">copyright</div>
      <div>Privacy Policy</div>
      <div>Terms of Use</div>
    </div>
  </div>
  </footer>

Answer 2

AFAIK Bootstrap：

容器
行
col- [size] - [n1 + n2 + n ... = 12]

以全页模式查看片段并调整大小。

段

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>00A00</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
  <style>
    /********CSS*******/
    .container {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
      max-width: 1170px;
    }
    footer {
      border: 1px solid black;
      border-bottom: 0 none transparent;
    }
    @media(min-width: 48em) {
      /*768px*/
      footer.row .left-division {
        border-right: 1px solid black;
      }
      footer.row {
        border-top: 1px solid black;
      }
    }
    /******************/
  </style>
</head>

<body>
  <div class="container">
    <!--*******HtML*******-->

    <footer class="row">
      <div class="col-md-6 left-division">
        <div class='row'>
          <div class='logo col-sm-6'>
            <img src='http://placehold.it/50x50/000/fff?text=LOGO'>
          </div>
          <address class='col-sm-6'>
            <div>Address</div>
            <div>Phone Number</div>
            </address>
        </div>
      </div>
      <div class="col-md-6">
        <div class='row'>
          <div class='col-sm-6'>
            <div>Social Media</div>
          </div>
          <div class='col-sm-6'>
            <div>copyright</div>
            <div>Privacy Policy</div>
            <div>Terms of Use</div>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <script>
  </script>
</body>

</html>

从父类覆盖最大宽度

2 个答案:

段