Header 无法响应

Question

我正在尝试让我的 header 响应，但我无法做到。所以我的 header 是两部分。一个 phone 和电子邮件在左边，一些链接在右边。

header .head-contact {
  height: 40px;
  background: #fff6dd;
  color: #000;
  padding: 10px 0;
  font-weight: bold;
}

header .container .left {
  font-weight: bold;
}

header .head-contact .container .left a {
  padding-right: 20px;
  color: #000;
}

header .head-contact .container .left a i {
  padding-right: 5px;
  font-size: 14px;
}

header .container .right {
  color: #000;
  text-align: right;
}

header .container .right span {
  padding: 0 10px;
}

@media screen and (max-width:963px) {
  header .head-contact {
    height: 60px;
  }
  header .container .left,
  header .container .right {
    display: flex;
    justify-content: center;
  }
}

<header>
  <div class="head-contact">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 left">
          <a href="tel:02129252027"><i class="fa fa-volume-control-phone"></i>0000000000</a
                  >
                  <a href="mailto:info@dheder.org.tr"
                    ><i class="fa fa-envelope-o"></i> abc@djfdfkj.com</a
                  >
                </div>
                <div class="col-lg-6 col-md-12 col-sm-12 right">
                  <a class="right" href="">ABout</a>
          <span>|</span>
          <a class="right" href="">Contact</a>
          <span>|</span>
          <a class="right" href="">Account</a>
        </div>
      </div>
    </div>
  </div>
</header>

所以它不合适，我不知道我在媒体查询中做错了什么。

Answer 1

如果添加此 CSS 规则，

header .container>.row {
  display: flex;
}

... 和 margin-left: auto 在其应该右对齐的子元素上，你应该得到你想要的。并从 .right.

中删除 text-align: right

对于移动版本（即在媒体查询中）将 flex-direction 切换为 column 并重置所有边距和填充，如下所示：

header .head-contact {
  height: 40px;
  background: #fff6dd;
  color: #000;
  padding: 10px 0;
  font-weight: bold;
}

header .container>.row {
  display: flex;
}

header .container .left {
  font-weight: bold;
}

header .head-contact .container .left a {
  padding-right: 20px;
  color: #000;
}

header .head-contact .container .left a i {
  padding-right: 5px;
  font-size: 14px;
}

header .container .right {
  color: #000;
  margin-left: auto;
}

header .container .right span {
  padding: 0 10px;
}

@media screen and (max-width:963px) {
  header .head-contact {
    height: 60px;
  }
header .container>.row {
  flex-direction: column;
  align-items: center;
}
header .container .right {
  color: #000;
  margin-left: 0;
}
header .head-contact .container .left a {
  padding-right: 0px;
}

<header>
  <div class="head-contact">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 left">
          <a href="tel:02129252027"><i class="fa fa-volume-control-phone"></i>0000000000</a>
          <a href="mailto:info@dheder.org.tr"><i class="fa fa-envelope-o"></i> abc@djfdfkj.com</a>
        </div>
        <div class="col-lg-6 col-md-12 col-sm-12 right">
          <a class="right" href="">ABout</a>
          <span>|</span>
          <a class="right" href="">Contact</a>
          <span>|</span>
          <a class="right" href="">Account</a>
        </div>
      </div>
    </div>
  </div>
</header>

Header 无法响应

Header cannot be responsive

html

css

flexbox

responsive-design