Bootstrap 4-導航欄搜索欄中心
[英]Bootstrap 4 - Navbar searchbar center
問題描述
我目前在將搜索欄居中放置在導航欄上有些掙扎。 我已經嘗試了許多不同的方法，例如mr-atuo和ml-auto或mx-auto但我只是無法移動元素。 我不想使用單個像素，因為那樣在移動設備上看起來會很恐怖。 這是一個小示例，說明酒吧的位置以及當前位置： https : //imgur.com/a/bHXJD
這是我的導航欄的代碼：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://use.fontawesome.com/0ba2bca7b4.js"></script> <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"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom z-depth-half"> <div class="container"> <a class="navbar-brand" href="#"> <i class="fa fa-skype"></i> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a href="#" class="nav-link">Vragen</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Aanbieders</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item" style="border-right: 0.1rem solid lightgrey"> <form class="form-inline"> <input class="form-control mr-sm-2 search-input" type="search" placeholder="Zoeken..." name="search" id="search"> <button class="btn btn-search my-2 my-sm-0 " type="submit"> <i class="fa fa-search"></i> </button> </form> </li> <li class="nav-item"> <a class="nav-link" href="">Aanmelden</a> </li> <li class="nav-item"> <a class="nav-link btn nav-register-btn" href="">Registreren</a> </li> </ul> </div> </div> </nav> </body> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </html>
提前致謝！
2 個解決方案
解決方案1
2 已采納 2017-11-05 13:54:02
您將不得不稍微更改HTML結構。 將表格移出UL
HTML：
...
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2 search-input" type="search" placeholder="Zoeken..." name="search" id="search">
<button class="btn btn-search my-2 my-sm-0 " type="submit">
<i class="fa fa-search"></i>
</button>
</form>
<ul class="navbar-nav">
...
CSS：
.form-inline{
width: 100%;
display: flex;
justify-content: center;
}
.form-inline #search{
width: 50%;
}
解決方案2
0 2017-11-05 13:15:22
一種解決方案是為.form-inline分配一個最小寬度，並使用flex-box使.search-input增長：
.form-inline {
min-width: 500px;
}
.search-input {
flex-grow: 3;
}
導航欄中的Bootstrap 4 Center搜索欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.