세 개의 요소가있는 Navbar (왼쪽, 가운데, 오른쪽) : 왼쪽 및 오른쪽 요소를 한 행에서 가운데 ​​요소 아래로 작게 이동 하시겠습니까?

Question

부트 스트랩이있는 navbar를 만들고 있습니다. 그것은 3 개의 요소를 가지고 있습니다 : 두 개의 이미지가 좌우에 있고 검색 필드가 가운데에 있습니다. 이것은 내 현재 코드 :

HTML :

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <form class="navbar-form navbar" role="search"> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Suche" name="suche"> 
       <div class="input-group-btn"> 
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
       </div> 
      </div> 
     </form> 
     <div class="nav navbar-nav navbar-left"> 
      <a href="#"><img src="../images/ITPlattformLogo.png" alt="" height="80"></a> 
     </div> 
     <div class="nav navbar-nav navbar-right"> 
      <a href="http://www.hwr-berlin.de/home/" class="navbar-left"><img src="../images/HWRLogo.jpg" alt="" height="80"></a> 
     </div> 
    </div> 
</nav> 

CSS : 내가 좋아하는 것 작은 화면 크기에 대한

.navbar-form 
{ 
    position: absolute; 
    width: 100%; 
    left: 0; 
    text-align: center; 
    padding-top: 14px; 
} 

는 한 행에 두 이미지 및 검색 필드를 아래 두 번째 줄은 전체 화면 너비입니다. 어떻게해야합니까?

Answer 1

한가지 방법은 미디어 쿼리를 사용하여 소자의 위치를 ​​조정하는 것이다 ..

// when navbar is horizontal 
@media (min-width: 768px) { 
    .navbar-form 
    { 
     position: absolute; 
     width: 100%; 
     left: 0; 
     text-align: center; 
     padding-top: 14px; 
    } 
} 

// when navbar is vertical 
@media (max-width: 768px) { 
    .nav.navbar-nav { 
     float:left; 
     width: 50%; 
     text-align:center; 
    } 
    .nav.navbar-nav a { 
     margin: 0 auto; 
    } 
} 

http://www.codeply.com/go/t83k8AkHkL

다른 접근법 인 flexbox 및 alignment of Navbar components easier than 3.x 사용 부트 스트랩 4을 사용하는 것이다.

<nav class="navbar navbar-toggleable navbar-light bg-faded"> 
    <ul class="navbar-nav mx-auto flex-shrink"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#"><img src="//placehold.it/130x80" alt="one" height="80"></a> 
     </li> 
    </ul> 
    <ul class="navbar-nav mx-auto flex-unordered flex-sm-last"> 
     <li class="nav-item "> 
      <a class="nav-link" href="#"><img src="//placehold.it/130x80" alt="two" height="80"></a> 
     </li> 
    </ul> 
    <form class="mx-2 my-auto d-flex w-100 flex-last flex-sm-unordered"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
      <span class="input-group-btn"> 
       <button class="btn btn-outline-secondary" type="button">GO</button> 
       </span> 
     </div> 
    </form> 
</nav> 

http://www.bootply.com/E6gfMKzhl4