0
我有一个bootstrap 4 navbar组件的问题。Bootstrap 4 Flex导航栏调整大小对齐
如果我有一个宽屏分辨率我的图标列表正确显示，但如果我调整我的窗口的图标列表按钮的显示成为列列表。
如何解决？
的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例如...改变从大屏幕尺寸小。