当窗口尺寸减小到最小时如何避免图标溢出

Question

我正在尝试使用带有引导程序4的flex-box设计导航栏。我有三个div，每当浏览器缩小时，div的header__center和header__right就会换行。但是无论设备的尺寸多么小，我都希望它们保持在同一行。

现在，当设备宽度为576到614时，我遇到了这个问题：

并且当设备尺寸过小<314时，就会出现此问题

* {
  margin: 0;
  padding: 0;
}

nav.navbar {
  align-content: center;
  position: sticky;
  background-color: white;
  z-index: 100;
  top: 0;
  box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
  padding: 0px 20px;
  /* REMOVED TOP PADDING */
}

.fas .fa-search {
  color: #65676b;
}

.header__left>img {
  height: 40px;
}

.header__left {
  display: flex;
  align-items: center;
}

.header__input {
  display: flex;
  align-items: center;
  background-color: #eff2f5;
  padding: 10px;
  margin-left: 10px;
  border-radius: 999px;
}

.header__input>input {
  border: none;
  background-color: transparent;
  outline-width: 0;
  padding-left: 10px;
}

.header__center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}


/*modified css */

.header__center__option {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding-left: 10px;
  margin-bottom: 0;
  height: 60px;
}

.header__center__item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 400;
  padding: 0 2vw;
  height: 60px;
  margin-right: 8px;
  box-shadow: inset 0 3px #f8f9fa, inset 0 -3px #f8f9fa;
}

.header__center__item.active,
.header__center__item.active:hover {
  color: #1877f2;
  /* border-bottom: 1px solid #1877f2;
  border-bottom-width: 3px; */
  background-color: #f8f9fa;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.header__center__item:hover {
  background-color: #e9ebef;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.header_option-link {
  flex-direction: column;
  height: 52px;
  display: flex;
  text-decoration: none;
  justify-content: center;
  color: gray;
}

.header__center__item.active>.header_option-link {
  color: #1877f2;
}

.header_option-link:hover {
  color: gray;
}

.header__center__item.active {
  color: #1877f2;
  border-bottom: 1px solid #1877f2;
  border-bottom-width: 3px;
  background-color: #f8f9fa;
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
  right: 2px;
  left: 2px;
}

.header__info {
  display: flex;
  align-items: center;
  padding-right: 12px;
  margin-right: 8px;
  border-bottom-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  border-top-left-radius: 18px;
  padding-left: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.header__info__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #050505;
  margin-top: -4px;
  margin-bottom: -4px;
  line-height: 1.3333;
}

.header__right {
  display: flex;
}

.header__info>span {
  margin-left: 10px;
}

.header__items {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: #e4e6eb;
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);
}

.header__info img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-left: -8px;
}

.header__info:hover {
  background-color: #e4e6eb;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light py-xl-0 py-md-0 py-sm-0 py-2">
  <div class="header__left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
    <div class="header__input">
      <i class="fas fa-search"></i>
      <input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
    </div>
  </div>
  <div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
    <ul class="header__center__option">
      <li class="header__center__item active">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-plane fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bed fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bus-alt fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-umbrella-beach fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-spa fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
    </ul>
  </div>
  <div class="header__right">
    <div class="header__info">
      <img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
      <span class="header__info__name">User</span>
    </div>
    <div class="header__items">
      <i class="fas fa-envelope-open-text"></i>
    </div>
  </div>
</nav>

如何使这些图标不会出现在其他行中并对设备宽度减小的大小做出响应？任何帮助将不胜感激！

我正在考虑使用媒体查询，但始终坚持在同一行上应该采用的方法或技术。

Answer 1

删除班级padding-left: 10px上的header__center__option。

删除图标上的所有班级fa-lg。

如果要使其可滚动，请在下面添加内容。

nav.navbar{
  ...
  flex-wrap: nowrap;
  overflow: auto;
}

https://jsfiddle.net/290478rf/1/

Answer 2

您只需要将header__left，header__center__option和header__right移到一个父级。

更改

<div class="header__left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
    <div class="header__input">
      <i class="fas fa-search"></i>
      <input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
    </div>
  </div>
  <div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
    <ul class="header__center__option">
      <li class="header__center__item active">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-plane fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bed fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bus-alt fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-umbrella-beach fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-spa fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
    </ul>
  </div>
  <div class="header__right">
    <div class="header__info">
      <img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
      <span class="header__info__name">User</span>
    </div>
</div>

到

<div>
<div class="header__left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
    <div class="header__input">
      <i class="fas fa-search"></i>
      <input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
    </div>
  </div>
  <div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
    <ul class="header__center__option">
      <li class="header__center__item active">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-plane fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bed fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bus-alt fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-umbrella-beach fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-spa fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
    </ul>
  </div>
  <div class="header__right">
    <div class="header__info">
      <img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
      <span class="header__info__name">User</span>
    </div>
</div>
</div>

现在在相应的断点处隐藏并显示header__center__item。这将解决您的两个问题。

Answer 3

* {
  margin: 0;
  padding: 0;
}

nav.navbar {
  align-content: center;
  position: sticky;
  background-color: white;
  z-index: 100;
  top: 0;
  box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
  padding: 0px 20px;
  overflow: hidden;

  /* REMOVED TOP PADDING */
}

.fas .fa-search {
  color: #65676b;
}

.header__left>img {
  height: 40px;
}

.header__left {
  display: flex;
  align-items: center;
}

.header__input {
  display: flex;
  align-items: center;
  background-color: #eff2f5;
  padding: 10px;
  margin-left: 10px;
  border-radius: 999px;
}

.header__input>input {
  border: none;
  background-color: transparent;
  outline-width: 0;
  padding-left: 10px;
}

.header__center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}


/*modified css */

.header__center__option {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding-left: 10px;
  margin-bottom: 0;
  height: 60px;
}

.header__center__item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 400;
  padding: 0 2vw;
  height: 60px;
  margin-right: 8px;
  box-shadow: inset 0 3px #f8f9fa, inset 0 -3px #f8f9fa;
}

.header__center__item.active,
.header__center__item.active:hover {
  color: #1877f2;
  /* border-bottom: 1px solid #1877f2;
  border-bottom-width: 3px; */
  background-color: #f8f9fa;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.header__center__item:hover {
  background-color: #e9ebef;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.header_option-link {
  flex-direction: column;
  height: 52px;
  display: flex;
  text-decoration: none;
  justify-content: center;
  color: gray;
}

.header__center__item.active>.header_option-link {
  color: #1877f2;
}

.header_option-link:hover {
  color: gray;
}

.header__center__item.active {
  color: #1877f2;
  border-bottom: 1px solid #1877f2;
  border-bottom-width: 3px;
  background-color: #f8f9fa;
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
  right: 2px;
  left: 2px;
}

.header__info {
  display: flex;
  align-items: center;
  padding-right: 12px;
  margin-right: 8px;
  border-bottom-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  border-top-left-radius: 18px;
  padding-left: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.header__info__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #050505;
  margin-top: -4px;
  margin-bottom: -4px;
  line-height: 1.3333;
}

.header__right {
  display: flex;
}

.header__info>span {
  margin-left: 10px;
}

.header__items {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: #e4e6eb;
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);
}

.header__info img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-left: -8px;
}

.header__info:hover {
  background-color: #e4e6eb;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light py-xl-0 py-md-0 py-sm-0 py-2">
  <div class="header__left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
    <div class="header__input">
      <i class="fas fa-search"></i>
      <input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
    </div>
  </div>
  <div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
    <ul class="header__center__option">
      <li class="header__center__item active">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-plane fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bed fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bus-alt fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-umbrella-beach fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-spa fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
    </ul>
  </div>
  <div class="header__right">
    <div class="header__info">
      <img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
      <span class="header__info__name">User</span>
    </div>
    <div class="header__items">
      <i class="fas fa-envelope-open-text"></i>
    </div>
  </div>
</nav>