[英]Equal space between navigation icons
How to have facebook navigation like alignments in Bootstrap? 如何在Bootstrap中使Facebook导航像对齐方式?
Run the code in full page. 全页运行代码。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"> <nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;"> <ul class="navbar-nav"> <li class="nav-item"><a href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a></li> <li class="nav-item"><a href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a></li> <li class="nav-item"><a href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a></li> <li class="nav-item"><a href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a></li> </ul> </nav>
As facebook navigation icons have equal space between each other, how can I acheive it in my navigation? 由于facebook导航图标之间具有相等的间距,如何在导航中实现它?
Note : If the screen gets bigger/shorter it should auto adjust them self.
注意 :如果屏幕变大/变短,则应自行自动调整。
You can use flexbox to evenly space each nav item: 您可以使用flexbox均匀分隔每个导航项:
.navbar-nav {
display: flex;
justify-content: space-between;
width: 100%;
}
.navbar-nav { display: flex; justify-content: space-between; width: 100%; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"> <nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;"> <ul class="navbar-nav"> <li class="nav-item"><a href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a></li> <li class="nav-item"><a href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a></li> <li class="nav-item"><a href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a></li> <li class="nav-item"><a href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a></li> </ul> </nav>
Simpler than I thought with no need to redefine the BS4 CSS. 比我想象的要简单,无需重新定义BS4 CSS。 I modified the navbar to use bs4 markup without the
ul
and li
...seems cleaner this way 我修改了导航栏以使用不带
ul
和li
bs4标记...似乎更清洁
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"> <nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;"> <div class="navbar-nav w-100 nav-justified"> <a class="nav-item" href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a> <a class="nav-item" href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a> <a class="nav-item" href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a> <a class="nav-item" href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a> </div> </nav>
You can do something like this: 您可以执行以下操作:
.navbar-nav {
display: flex;
}
.nav-item {
flex: 1;
text-align: center;
margin: 5px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.