유연한 검색 바

-1

만들기 난 내가이 원하는 내 헤더에 약간의 문제가 있습니다 유연하게유연한 검색 바

검색 창을,이는 오렌지 버튼 텍스트가 커지게되면 검색 창 크기를 조정해야 함을 의미합니다 그 buttonsdont가 다운 그래서 누가 내 영어

HTML

<div class="navigation-holder"> 
     <div id="top-navbar"> 
      <div class="container"> 
       <div class="col-lg-9 no-padding"> 
        <input type="text" name="" class="top-navbar-search" placeholder="Поиск по предметам или по именам"> 
       </div> 
       <div class="col-lg-3 no-padding"> 
        <div class="top-navbar-links"> 
        @if(Auth::check()) 
         <a href="{{ action('[email protected]') }}" class="top-navbar-links-login">{{ Auth::user()->first_name }}</a> 
         <a href="{{ action('[email protected]') }}" class="top-navbar-links-login">Выйти</a> 
        @else 
         <a href="{{ action('[email protected]') }}" class="top-navbar-links-login">aefaefaefaefaefaefaefe</a> 
         <a href="{{ action('[email protected]') }}" class="top-navbar-links-register">Зарегистрироваться</a> 
        @endif 
        </div> 
       </div> 
      </div> 
     </div> 
     <nav id="navbar"> 
      <div class="container"> 
       <a href="{{ action('[email protected]') }}" class="navbar-brand"></a> 

       <button class="navbar-toggle"> 
        <span></span> 
       </button> 

       <ul class="navbar-nav"> 
        <li><a href="">Обратная связь</a></li> 
        <li><a href="{{ action('[email protected]') }}">О проекте</a></li> 

        <li><a href="">Рус</a></li> 
        <li><a href="">Узб</a></li> 
        <li><a href="">Eng</a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 






#top-navbar{ 
    min-height: 50px; 
    width: 100%; 
    background-color: @brand-blue; 

    .top-navbar-search{ 
     width: 100%; 
     min-height: 50px; 
     padding: 0 70px 0 20px; 
     color: #fff; 
     background: #339dd1 url(../img/search.svg) no-repeat 97% 48%; 
     background-size: 22px; 
     font-size: 18px; 
     font-family: 'Light'; 

     .placeholder({ 
      color: #fff; 
     }); 
    } 

    .top-navbar-links{ 
     width: 100%; 
     text-align: center; 
     display: table-cell; 
     a{ 
      padding: 0 10px; 
      font-family: 'Light'; 
      color: #fff; 
      display: inline-block; 
      line-height: 50px; 
      font-size: 18px; 
      min-height: 50px; 
      float: left; 
      background-color: @brand-yellow; 
      .transition(background, 200ms, linear); 

      &:hover{ 
       background-color: #d17a45; 
      } 

     } 
    } 
} 



#navbar{ 
    background-color: #fff; 
    min-height: 70px; 
    width: 100%; 
    border-bottom: 1px solid #cbcbcb; 

    .navbar-brand{ 
     width: 160px; 
     height: 41px; 
     background: url(../img/brand.svg) no-repeat center; 
     background-size: 100%; 
     display: inline-block; 
     margin-top: 16px; 
    } 

    .navbar-toggle{ 
     width: 70px; 
     height: 70px; 
     float: right; 
     position: relative; 
     display: none; 
     span{ 
      display: block; 
      width: 35px; 
      margin: 0 auto; 
      height: 4px; 
      background-color: #393939; 
      .transition(all, 200ms, linear); 

      &:before{ 
       content: ''; 
       top: 23px; 
       .bar; 
      } 
      &:after{ 
       content: ''; 
       bottom: 23px; 
       .bar; 
      } 
     } 

     &:hover{ 
      span{ 
       background-color: @brand-blue; 
       &:before, &:after{ 
        background-color: @brand-blue; 
       } 
      } 
     } 
    } 

    .navbar-nav{ 
     float: right; 
     display: inline-block; 
     line-height: 70px; 

     li{ 
      display: inline-block; 
      &:first-child{ 
       margin-right: 20px; 
      } 
      &:nth-child(3){ 
       margin-left: 30px; 
      } 
     } 

     a{ 
      display: block; 
      line-height: 70px; 
      color: @brand-black; 
      .transition(color, 100ms, linear); 

      &:hover{ 
       color: @brand-blue; 
      } 
     } 
    } 
}

출처

2016-08-08 Sanjar Mirakhmedov

html과 css를 입력하십시오. 또는 jsFiddle atleast –

U를 당신이 당신의 경험을 공유 할 수 있습니다 수행하고 죄송 형성하는 방법을 알고 예 부트 스트랩 그리드, 예 :

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-2" style="background-color:blue;"></div> 
    <div class="col-sm-7" style="background-color:lavenderblush;">Search</div> 
    <div class="col-sm-1" style="background-color:lavenderblush;">Button</div> 
    <div class="col-sm-2" style="background-color:blue;"></div> 
    </div> 
</div> 

</body> 
</html>

출처

2016-08-08 08:05:48 El0din

버튼의 텍스트가 크면 검색 막대의 크기가 조절되지 않고 격자가 사용됩니다 –

CSS 및 HTML을 제공 할 수 있습니까? thx – El0din

거기에 미안 해요 한 코드 블록에서 나는 스택 편집기 좋지 않다 제공 –

유연한 검색 바

답변

관련 문제