Bootstrap 4 Flex 导航栏调整大小对齐

Question

我的 bootstrap 4 navbar 组件有问题。

如果我有宽屏分辨率，我的图标列表会正确显示，但如果我调整我的 window 图标列表按钮的显示变成列列表。

如何解决？

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css"/>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
     <div id="wrapper">
         <div class="topbar">
                <!-- LOGO -->
                <div class="topbar-left">
                    <a href="index.html" class="logo">
                        <i class="zmdi zmdi-calendar icon-c-logo"></i>
                        <span>TEST</span></a>
                </div>
                <nav class="navbar navbar-toggleable-md navbar-custom">
                    <ul class="nav navbar-nav">
                        <li class="nav-item hidden-mobile">
                            <form role="search" class="app-search">
                                <input type="text" placeholder="Search..." class="form-control">
                                <a href="index.html"><i class="fa fa-search"></i></a>
                            </form>
                        </li>
                    </ul>

                    <ul class="navbar-nav navbar-right">
                        <li class="nav-item dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="index.html#" role="button"
                               aria-haspopup="false" aria-expanded="false">
                                <i class="zmdi zmdi-notifications-none noti-icon"></i>
                                <span class="noti-icon-badge"></span>
                            </a>

                        </li>


                        <li class="nav-item dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="index.html#" role="button"
                               aria-haspopup="false" aria-expanded="false">
                                <i class="zmdi zmdi-email noti-icon"></i>
                                <span class="noti-icon-badge"></span>
                            </a>

                        </li>

                        <li class="nav-item dropdown notification-list">
                            <a class="nav-link waves-effect waves-light right-bar-toggle" href="javascript:void(0);">
                                <i class="zmdi zmdi-format-subject noti-icon"></i>
                            </a>
                        </li>



                    </ul>

                </nav>
            </div>
     </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

style.css

/* Styles go here */

.topbar {
    left: 0px;
    position: fixed;
    right: 0;
    top: 0px;
    z-index: 999;
}
.topbar .topbar-left {
    background: #ffffff;
    float: left;
    text-align: center;
    height: 70px;
    position: relative;
    width: 250px;
    z-index: 1;
}
.topbar .topbar-left .logo {
    line-height: 70px;
}
.navbar-custom {
    background-color: #101823;
    border-radius: 0px;
    margin-bottom: 0px;
    padding: 0px 20px;
    margin-left: 250px;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
.navbar-custom .navbar-nav .nav-link {
    padding: 0px;
    line-height: 70px;
    color: rgba(255, 255, 255, 0.6);
}
.navbar-custom .navbar-right {
    margin-left: auto;
}
.logo {
    color: #101823 !important;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.logo span span {
    color: #ef193c;
}
.user-box {
    text-align: center;
    padding: 30px 0px 20px 0px;
}
.user-box .user-img {
    position: relative;
    height: 88px;
    width: 88px;
    margin: 0px auto;
}
.user-box h5 a {
    color: #373a3c;
}
.user-box .user-status {
    height: 12px;
    width: 12px;
    position: absolute;
    bottom: 7px;
    right: 15px;
}
.user-box .user-status i {
    font-size: 15px;
}
.user-box .user-status.away i {
    color: #fcca03;
}
.user-box .user-status.offline i {
    color: #ef193c;
}
.user-box .user-status.online i {
    color: #22b66e;
}
.user-box .user-status.busy i {
    color: #373a3c;
}
.user-box ul li a {
    color: #373a3c;
}
.user-box ul li a:hover {
    color: #ef193c;
}
/* Notification */

.notification-list {
    margin-left: 0 !important;
}
.notification-list .noti-title {
    border-radius: 0.25rem 0.25rem 0 0;
    background-color: #ef193c;
    margin: -6px -1px 0px -1px;
    width: auto;
    padding: 12px 20px;
}
.notification-list .noti-title h5 {
    color: #ffffff;
    margin: 0;
}
.notification-list .noti-icon {
    font-size: 22px;
    padding: 0 12px;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.8);
}
.notification-list .noti-icon-badge {
    height: 10px;
    width: 10px;
    background-color: #ef193c;
    display: inline-block;
    position: absolute;
    top: 23px;
    right: 12px;
    border-radius: 50%;
    border: 2px solid #101823;
}
.notification-list .notify-item {
    padding: 10px 20px;
}
.notification-list .notify-item .notify-icon {
    float: left;
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    margin-right: 10px;
    border-radius: 50%;
}
.notification-list .notify-item .notify-icon img {
    margin-top: 4px;
}
.notification-list .notify-item .notify-details {
    margin-bottom: 0;
    overflow: hidden;
    margin-left: 45px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notification-list .notify-item .notify-details b {
    font-weight: 500;
}
.notification-list .notify-item .notify-details small {
    display: block;
}
.notification-list .notify-item .notify-details span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.notification-list .notify-all {
    border-radius: 0 0 0.25rem 0.25rem;
    margin: 0 0 -5px 0;
    background-color: #eceeef;
}

/* Seach */

.app-search {
    position: relative;
}
.app-search a {
    position: absolute;
    top: 0;
    right: 5px;
    display: block;
    height: 34px;
    line-height: 34px;
    width: 34px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}
.app-search a:hover {
    color: #ffffff;
}
.app-search .form-control,
.app-search .form-control:focus {
    border: 1px solid rgba(129, 138, 145, 0.3);
    font-size: 13px;
    height: 34px;
    color: #ffffff;
    padding-left: 20px;
    padding-right: 40px;
    margin-top: 18px;
    background: rgba(129, 138, 145, 0.1);
    box-shadow: none;
    border-radius: 30px;
    width: 200px;
}

这是我的 plunker 示例...将屏幕尺寸从大改为小。

Plunker

Answer 1

在您的 .navbar-nav 中设置 flex-direction: row 因为它在 bootstrap.css

中设置为 column

.navbar-nav {
  flex-direction: row !important
}
/* Styles go here */

.topbar {
    left: 0px;
    position: fixed;
    right: 0;
    top: 0px;
    z-index: 999;
}
.topbar .topbar-left {
    background: #ffffff;
    float: left;
    text-align: center;
    height: 70px;
    position: relative;
    width: 250px;
    z-index: 1;
}
.topbar .topbar-left .logo {
    line-height: 70px;
}
.navbar-custom {
    background-color: #101823;
    border-radius: 0px;
    margin-bottom: 0px;
    padding: 0px 20px;
    margin-left: 250px;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
.navbar-custom .navbar-nav .nav-link {
    padding: 0px;
    line-height: 70px;
    color: rgba(255, 255, 255, 0.6);
}
.navbar-custom .navbar-right {
    margin-left: auto;
}
.logo {
    color: #101823 !important;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.logo span span {
    color: #ef193c;
}
.user-box {
    text-align: center;
    padding: 30px 0px 20px 0px;
}
.user-box .user-img {
    position: relative;
    height: 88px;
    width: 88px;
    margin: 0px auto;
}
.user-box h5 a {
    color: #373a3c;
}
.user-box .user-status {
    height: 12px;
    width: 12px;
    position: absolute;
    bottom: 7px;
    right: 15px;
}
.user-box .user-status i {
    font-size: 15px;
}
.user-box .user-status.away i {
    color: #fcca03;
}
.user-box .user-status.offline i {
    color: #ef193c;
}
.user-box .user-status.online i {
    color: #22b66e;
}
.user-box .user-status.busy i {
    color: #373a3c;
}
.user-box ul li a {
    color: #373a3c;
}
.user-box ul li a:hover {
    color: #ef193c;
}
/* Notification */

.notification-list {
    margin-left: 0 !important;
}
.notification-list .noti-title {
    border-radius: 0.25rem 0.25rem 0 0;
    background-color: #ef193c;
    margin: -6px -1px 0px -1px;
    width: auto;
    padding: 12px 20px;
}
.notification-list .noti-title h5 {
    color: #ffffff;
    margin: 0;
}
.notification-list .noti-icon {
    font-size: 22px;
    padding: 0 12px;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.8);
}
.notification-list .noti-icon-badge {
    height: 10px;
    width: 10px;
    background-color: #ef193c;
    display: inline-block;
    position: absolute;
    top: 23px;
    right: 12px;
    border-radius: 50%;
    border: 2px solid #101823;
}
.notification-list .notify-item {
    padding: 10px 20px;
}
.notification-list .notify-item .notify-icon {
    float: left;
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    margin-right: 10px;
    border-radius: 50%;
}
.notification-list .notify-item .notify-icon img {
    margin-top: 4px;
}
.notification-list .notify-item .notify-details {
    margin-bottom: 0;
    overflow: hidden;
    margin-left: 45px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notification-list .notify-item .notify-details b {
    font-weight: 500;
}
.notification-list .notify-item .notify-details small {
    display: block;
}
.notification-list .notify-item .notify-details span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.notification-list .notify-all {
    border-radius: 0 0 0.25rem 0.25rem;
    margin: 0 0 -5px 0;
    background-color: #eceeef;
}

/* Seach */

.app-search {
    position: relative;
}
.app-search a {
    position: absolute;
    top: 0;
    right: 5px;
    display: block;
    height: 34px;
    line-height: 34px;
    width: 34px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}
.app-search a:hover {
    color: #ffffff;
}
.app-search .form-control,
.app-search .form-control:focus {
    border: 1px solid rgba(129, 138, 145, 0.3);
    font-size: 13px;
    height: 34px;
    color: #ffffff;
    padding-left: 20px;
    padding-right: 40px;
    margin-top: 18px;
    background: rgba(129, 138, 145, 0.1);
    box-shadow: none;
    border-radius: 30px;
    width: 200px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css" />
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div id="wrapper">
  <div class="topbar">
    <!-- LOGO -->
    <div class="topbar-left">
      <a href="index.html" class="logo">
        <i class="zmdi zmdi-calendar icon-c-logo"></i>
        <span>TEST</span>
      </a>
    </div>
    <nav class="navbar navbar-toggleable-md navbar-custom">
      <ul class="nav navbar-nav">
        <li class="nav-item hidden-mobile">
          <form role="search" class="app-search">
            <input type="text" placeholder="Search..." class="form-control">
            <a href="index.html"><i class="fa fa-search"></i></a>
          </form>
        </li>
      </ul>

      <ul class="navbar-nav navbar-right">
        <li class="nav-item dropdown notification-list">
          <a class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="index.html#" role="button" aria-haspopup="false" aria-expanded="false">
            <i class="zmdi zmdi-notifications-none noti-icon"></i>
            <span class="noti-icon-badge"></span>
          </a>

        </li>


        <li class="nav-item dropdown notification-list">
          <a class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="index.html#" role="button" aria-haspopup="false" aria-expanded="false">
            <i class="zmdi zmdi-email noti-icon"></i>
            <span class="noti-icon-badge"></span>
          </a>

        </li>

        <li class="nav-item dropdown notification-list">
          <a class="nav-link waves-effect waves-light right-bar-toggle" href="javascript:void(0);">
            <i class="zmdi zmdi-format-subject noti-icon"></i>
          </a>
        </li>



      </ul>

    </nav>
  </div>
</div>

Bootstrap 4 Flex 导航栏调整大小对齐

Bootstrap 4 Flex navbar resize align

html

css

flexbox

twitter-bootstrap-4