使用引導程序縮小某些屏幕尺寸的輸入字段

Question

我是自舉新手。

我儘量讓包含窗體和導航導航欄。 我想縮小某些屏幕尺寸的輸入字段。

現在它看起來是這樣的。

這是OK：

在這種情況下，我想縮小輸入字段：

相關的HTML代碼：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <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="#">Site Name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <form class="navbar-form navbar-left"> 
     <div class="form-group"> 
      <input type="text" placeholder="Email" class="form-control"> 
     </div> 
     <button type="submit" class="btn btn-success">Subscribe</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Menu <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">First Menu Item</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

我該如何做到這一點？

謝謝。

Answer 1

你可以使用這個CSS：

.navbar-form .form-control { 
    width: 100px; // your width 
} 
@media (min-width: 768px) { 
    .navbar-form .form-control { 
    width: 150px; // your width 
    } 
} 

Answer 2

做這些改變 在HTML：

<ul id="navbarRight" class="nav navbar-nav navbar-right"> 

而不是

<ul class="nav navbar-nav navbar-right"> 

上面是最後一次。 並添加此CSS

 #navbar{ 
      width: 100%; 
     } 
     form{ 
      max-width: 45%; 
     } 
     #navbarRight{ 
      max-width: 55%; 
     }