代码之家  ›  专栏  ›  技术社区  ›  Redtama

Bootstrap 4导航栏,带2行和内联表单

navbar bootstrap-4 flexbox twitter-bootstrap css
  •  5
  • Redtama  · 技术社区  · 8 年前

    好吧,有很多像这样的问题,但在对其他类似问题的一些答案进行了代码实验之后,我仍然被卡住了!

    我已经设法在一个flex列中使用两个flex行,品牌图像垂直居中,但我在水平间距方面遇到了问题。

    在导航栏的第一行,我有一个导航项目列表,还有一个带搜索栏的内联表单。我希望搜索栏右对齐,而导航项目保持左对齐。

    我曾尝试在各种元素上使用justify content between,但运气不好,我也尝试过m*-自动类,但我就是不能将导航项目和搜索栏保持在同一行上,同时将它们水平分开!

    这是我的密码 

    .navbar {
  padding-top: 0;
  padding-bottom: 0;
  /*  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.03);  */
  font-weight: 300;
}

.navbar-dark {
  background: linear-gradient(to right, rgba(0, 45, 165, 0.97), rgba(10, 88, 157, 0.97), rgba(10, 88, 157, 0.97), rgba(0, 45, 165, 0.97));
}

.navbar-brand {
  margin-right: 20px;
}

.nav-item {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 80%;
  padding: 0 .4rem;
}

.navbar .navbar-nav .nav-link {
  transition: all .05s ease-in-out;
}

.navbar-dark .navbar-nav .nav-link.active {
  border-bottom: 1px solid white;
}

.navbar-dark .navbar-nav .nav-link:hover {
  border-bottom: 1px solid white;
}

.navbar-toggler:hover {
  cursor: pointer;
}

#search-bar {
  background-color: #5c87af;
  color: white;
  font-size: 14px;
  width: 200px;
  height: 30px;
  transition: all .2s;
  border: none;
}

#search-bar:hover {
  background-color: #779ec1;
}

#search-bar:focus {
  background-color: white;
  color: #212529;
  width: 400px;
}

#search-bar::-webkit-input-placeholder {
  color: white !important;
}

#search-bar:-moz-placeholder {
  /* Firefox 18- */
  color: white !important;
}

#search-bar::-moz-placeholder {
  /* Firefox 19+ */
  color: white !important;
}

#search-bar:-ms-input-placeholder {
  color: white !important;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-dark navbar-expand-sm">
  <a class="navbar-brand" href="#">
    <img src="/images/MW-logo-white.png" height=28 class="" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse flex-column align-items-start" id="navbar">
    <ul class="navbar-nav nav my-1">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#property-tab">PROPERTY</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#units-tab">UNITS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tenancies-tab">TENANCIES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pdfs-tab">PDFs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#contacts-tab">CONTACTS</a>
      </li>
      <form class="form-inline">
        <input class="form-control search" type="text" id="search-bar" placeholder="Search..." autocomplete="off" spellcheck="false" autocorrect="off" />
      </form>
    </ul>
    <ul class="navbar-nav nav my-1">
      <li class="nav-item">
        <a href="#" class="nav-link active">ALL</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CURRENT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">PAST</a>
      </li>
    </ul>
  </div>
</nav>
    3 回复  |  直到 6 年前
        1
  •  3
  •   Carol Skelly    8 年前

    只要确保两者都是 navbar-nav 是全宽的。您可以使用 w-100 为此。。。

    https://www.codeply.com/go/DGmjwI79yy 

    <nav class="navbar fixed-top navbar-dark navbar-expand-sm">
  <a class="navbar-brand" href="#">
    <img src="//placehold.it/100x30" height=28 class="" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse flex-column" id="navbar">
    <ul class="navbar-nav nav my-1 w-100">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#property-tab">PROPERTY</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#units-tab">UNITS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tenancies-tab">TENANCIES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pdfs-tab">PDFs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#contacts-tab">CONTACTS</a>
      </li>
      <form class="form-inline ml-auto">
        <input class="form-control search" type="text" id="search-bar" placeholder="Search..." autocomplete="off" spellcheck="false" autocorrect="off" />
      </form>
    </ul>
    <ul class="navbar-nav nav my-1 w-100">
      <li class="nav-item">
        <a href="#" class="nav-link active">ALL</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CURRENT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">PAST</a>
      </li>
    </ul>
  </div>
</nav>

    然后 ml-auto 将按预期工作,将窗体向右推。

    相关问题:
    Bootstrap 4 navbar with 2 rows

        2
  •  1
  •   Community Mohan Dere    6 年前

    您只需使用两个 class 。

    1-添加 w-100 在这里 <ul class="navbar-nav nav my-1">

    2-添加 ml-auto 在这里 <form class="form-inline">

    这是正在运行的演示 

    .navbar {
  padding-top: 0;
  padding-bottom: 0;
  /*  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.03);  */
  font-weight: 300;
}

.navbar-dark {
  background: linear-gradient(to right, rgba(0, 45, 165, 0.97), rgba(10, 88, 157, 0.97), rgba(10, 88, 157, 0.97), rgba(0, 45, 165, 0.97));
}

.navbar-brand {
  margin-right: 20px;
}

.nav-item {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 80%;
  padding: 0 .4rem;
}

.navbar .navbar-nav .nav-link {
  transition: all .05s ease-in-out;
}

.navbar-dark .navbar-nav .nav-link.active {
  border-bottom: 1px solid white;
}

.navbar-dark .navbar-nav .nav-link:hover {
  border-bottom: 1px solid white;
}

.navbar-toggler:hover {
  cursor: pointer;
}

#search-bar {
  background-color: #5c87af;
  color: white;
  font-size: 14px;
  width: 200px;
  height: 30px;
  transition: all .2s;
  border: none;
}

#search-bar:hover {
  background-color: #779ec1;
}

#search-bar:focus {
  background-color: white;
  color: #212529;
  width: 400px;
}

#search-bar::-webkit-input-placeholder {
  color: white !important;
}

#search-bar:-moz-placeholder {
  /* Firefox 18- */
  color: white !important;
}

#search-bar::-moz-placeholder {
  /* Firefox 19+ */
  color: white !important;
}

#search-bar:-ms-input-placeholder {
  color: white !important;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-dark navbar-expand-sm">
  <a class="navbar-brand" href="#">
    <img src="/images/MW-logo-white.png" height=28 class="" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse flex-column align-items-start" id="navbar">
    <ul class="navbar-nav nav my-1 w-100">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#property-tab">PROPERTY</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#units-tab">UNITS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tenancies-tab">TENANCIES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pdfs-tab">PDFs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#contacts-tab">CONTACTS</a>
      </li>
      <form class="form-inline ml-auto">
        <input class="form-control search" type="text" id="search-bar" placeholder="Search..." autocomplete="off" spellcheck="false" autocorrect="off" />
      </form>
    </ul>
    <ul class="navbar-nav nav my-1">
      <li class="nav-item">
        <a href="#" class="nav-link active">ALL</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CURRENT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">PAST</a>
      </li>
    </ul>
  </div>
</nav>
        3
  •  1
  •   Lakindu Gunasekara vinod    8 年前

    简单使用 ml-auto 到您的搜索栏类。

    基本上Ml正在 自动边距 另一个可以应用于单一弹性项目的是利润率。以下保证金类别可用:

    mr自动: 将边距添加到项目的右侧

    ml自动: 在项目左侧添加边距

    mt自动: 在项目顶部添加边距

    mb自动: 在项目底部添加边距

    这是您的代码片段 

    .navbar {
  padding-top: 0;
  padding-bottom: 0;
  /*  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.03);  */
  font-weight: 300;
}

.navbar-dark {
  background: linear-gradient(to right, rgba(0, 45, 165, 0.97), rgba(10, 88, 157, 0.97), rgba(10, 88, 157, 0.97), rgba(0, 45, 165, 0.97));
}

.navbar-brand {
  margin-right: 20px;
}

.nav-item {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 80%;
  padding: 0 .4rem;
}

.navbar .navbar-nav .nav-link {
  transition: all .05s ease-in-out;
}

.navbar-dark .navbar-nav .nav-link.active {
  border-bottom: 1px solid white;
}

.navbar-dark .navbar-nav .nav-link:hover {
  border-bottom: 1px solid white;
}

.navbar-toggler:hover {
  cursor: pointer;
}

#search-bar {
  background-color: #5c87af;
  color: white;
  font-size: 14px;
  width: 200px;
  height: 30px;
  transition: all .2s;
  border: none;
}

#search-bar:hover {
  background-color: #779ec1;
}

#search-bar:focus {
  background-color: white;
  color: #212529;
  width: 400px;
}

#search-bar::-webkit-input-placeholder {
  color: white !important;
}

#search-bar:-moz-placeholder {
  /* Firefox 18- */
  color: white !important;
}

#search-bar::-moz-placeholder {
  /* Firefox 19+ */
  color: white !important;
}

#search-bar:-ms-input-placeholder {
  color: white !important;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-dark navbar-expand-sm">
  <a class="navbar-brand" href="#">
    <img src="/images/MW-logo-white.png" height=28 class="" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse flex-column align-items-start" id="navbar">
    <ul class="navbar-nav nav my-1 w-100">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#property-tab">PROPERTY</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#units-tab">UNITS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tenancies-tab">TENANCIES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pdfs-tab">PDFs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#contacts-tab">CONTACTS</a>
      </li>
      <form class="form-inline ml-auto">
        <input class="form-control search" type="text" id="search-bar" placeholder="Search..." autocomplete="off" spellcheck="false" autocorrect="off" />
      </form>
    </ul>
    <ul class="navbar-nav nav my-1">
      <li class="nav-item">
        <a href="#" class="nav-link active">ALL</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CURRENT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">PAST</a>
      </li>
    </ul>
  </div>
</nav>
    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号