html - 3 列。防止最后一列换行并从新行开始其所有元素

Question

它的响应式页面。当调整社交按钮的大小时，div 正在换行。如何防止它，而是让它从一行底部的新行开始？谢谢。

white-space:nowrap 不工作

.main-footer {
  width: 100%;
  height: auto;
  margin: auto;
  padding-top: 10px;
  background: #364B66;
}

.main-footer .footer-text {
  padding-top: 1em;
  padding-bottom: 0.5em;
  width: 100%;
  height: auto;
  margin: auto;
  text-align: center;
}

.main-footer .footer-text ul li {
  list-style-type: none;
  display: inline-flex;
  padding-right: 10%;
}

.main-footer .footer-text ul li a {
  color: gray;
  text-decoration: none;
  outline: none;
}

#social {
  margin-right: 0%;
}

.fa {
  color: gray;
  padding-left: 20px;
  font-size: 25px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class='main-footer'>
  <div class='container-fluid'>

    <div class='row'>
      <div class='col-lg-2 col-md-12 col-sm-12 col-xs-12'>
        <div class='footer-text'>
          <h1>name</h1>
        </div>
      </div>
      <div class='col-lg-8 col-md-12 col-sm-12 col-xs-12'>
        <div class='footer-text'>
          <ul>
            <li><a href="#!">Contact</a></li>
            <li><a href="#!">Aviso legal</a></li>
            <li><a href="#!">Seguridad</a></li>
            <li><a href="#!">Privacidad</a></li>
            <li><a href="#!">Politica de cookies</a></li>
          </ul>
        </div>
      </div>
      <div class='col-lg-2 col-md-12 col-sm-12 col-xs-12'>
        <div class='footer-text'>
          <div id='social'>
            <a href="#" class="fa fa-facebook"></a>
            <a href="#" class="fa fa-twitter"></a>
            <a href="#" class="fa fa-google"></a>
            <a href="#" class="fa fa-linkedin"></a>
          </div>
        </div>
      </div>
    </div>
  </div>

当调整社交按钮的大小时，div 正在换行。如何防止它，而是让它从一行底部的新行开始？谢谢。

Answer 1

nav {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

nav a {
  margin-right: 10px;
  white-space: nowrap;
}

<nav>
  <a href="#">Contact</a>
  <a href="#">Aviso Legal</a>
  <a href="#">Seguridad Privacidad</a>
  <a href="#">Politica de cookies</a>
</nav>