Bootstrap navbar-form ширина проблема на хром

Question

Я использую bootstrap 3.0.0.

При использовании примера Default Navbar, с некоторым пользовательским CSS, я обнаружил, что текстовое поле формы поиска принимает всю ширину на хроме, благодаря чему мой навигатор разбит на три строки. Он отлично работает на Firefox и IE.

Проблема, рассчитанная ширина в firefox 236px, но в хроме, это 1110px. В конце прикреплены как firefox & chrome screenshot. Код предоставляется после скриншотов, а также JSFiddle, но на нем не видно результата. Это просто для справки.

Это известная ошибка в хроме или, скорее всего, я ошибаюсь. Если да, может кто-нибудь, пожалуйста, выяснить, какую ошибку я сделал?

Пользовательские CSS

@import url(http://fonts.googleapis.com/css?family=Spirax|Oleo+Script+Swash+Caps&text=FlipKhan); 
body{background: url("../images/bg.gif") scroll center top #C0C0C0;} 
.navbar-top {margin-bottom: 0; min-height: 35px; height:50px;} 
.navbar-top div.container{height:45px;} 
.navbar-top div.container div.navbar-header{height:45px;} 
.navbar-top a.navbar-brand {padding: 10px;} 
.navbar-top div.container div.collapse{height:45px;} 
.navbar-top .navbar-brand {font-family: 'Oleo Script Swash Caps', cursive; font-size: 35px; color: #FFF;} 
.navbar-inverse { 
    background: none !important; 
    border: 0 !important; 
    box-shadow: none !important; 
    -webkit-box-shadow: none !important; 
} 
.navbar-inverse .nav .active > a { 
    background: 0 !important; 
    color: #333 !important; 
    box-shadow: none !important; 
    -webkit-box-shadow: none !important; 
} 
.navbar-inverse .nav > li > a { 
    color: #333 !important; 
    text-shadow: none !important; 
} 
.navbar-inverse .nav > li > a:hover { 
    color: #333 !important; 
} 

HTML (только для навигационной панели)

<header> 
    <nav class="navbar navbar-top navbar-default navbar-inverse" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="index.html">FlipKhan</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <form class="navbar-form navbar-left navbar-search" role="search"> 
      <div class="col-lg-12"> 
      <div class="input-group"> 
       <input type="text" class="form-control input-sm"> 
       <span class="input-group-btn"> 
       <button class="btn btn-info btn-sm" type="submit"><span class="glyphicon glyphicon-search"></button> 
       </span> 
      </div><!-- /input-group --> 
      </div><!-- /.col-lg-6 --> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Login</a></li> 
      <li><a href="#">Register</a></li> 
     </ul> 
     </div><!-- /.navbar-collapse --> 
    </div> 
    </nav> 
</header> 

EDIT:

Добавление следующих строка в проблеме исправления CSS в хроме

.navbar-search{max-width: 250px;} 

Однако я вижу это как взломать. Разве нет и лучшего способа решить проблему?

Answer 1

Не могли бы вы также проверить в других браузерах? Я думаю, что хром может быть прав. Но вы правы, что входные данные отличаются от хром и firefox.

Вы можете уменьшить проблему:

<div style="float:left;"> 
<div class="input-group"> 
       <input type="text" class="form-control input-sm"> 
       <span class="input-group-btn"> 
       <button class="btn btn-info btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
       </span> 
</div> 
</div> 

Примечание поплавок слева требуется, чтобы показать различия (ваш поплавок слева вышел из NavBar левого класса).

выше можно "перевести" на:

<div style="float:left;"> 
<div style="height:10px;background-color:red;" style="width:100%;"> 
<span style="display:table-cell;position:relative;width:1%;">txt</span> 
</div> 
</div> 

выше делает отличается хром и Firefox также без CSS Boosstrap в. Я не знаю, что Bootstrap CSS ошибочен или один из браузеров сейчас не прав. См. Также: https://github.com/twbs/bootstrap/issues/10645

Answer 2

У меня была такая же проблема с Chrome. Я решил добавить display:table на элемент form.

лучшее решение, чтобы добавить этот CSS:

@media (min-width: 767px) { 
    .navbar-form.navbar-left{ 
    display:table; 
    } 
} 

Я также удалили<div class="col-lg-12">(с ним, он не работает):

<form class="navbar-form navbar-left navbar-search" role="search">   
     <div class="input-group"> 
      <input type="text" class="form-control input-sm"> 
      <span class="input-group-btn"> 
      <button class="btn btn-info btn-sm" type="submit"><span class="glyphicon glyphicon-search"/></button> 
      </span> 
     </div><!-- /input-group --> 
</form>