使用引导程序缩小某些屏幕尺寸的输入字段

我尽量让包含窗体和导航导航栏。我想缩小某些屏幕尺寸的输入字段。

现在它看起来是这样的。

这是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>

我该如何做到这一点？

谢谢。

来源

2016-07-09 Zoltan

你可以使用这个CSS：

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

来源

2016-07-09 11:45:19 makshh

谢谢，它的工作。然而，在最后一种情况下，提交按钮仍然位于缩小输入字段的下方。如果有足够的空间，我怎么能把它放在输入栏旁边？ – Zoltan

你应该将你的按钮HTML元素移动到'form-group' div。 – makshh

现在，我的代码如下所示： '

\t \t \t

' 但还是老样子下面的提交按钮。 – Zoltan

做这些改变在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%; 
     }

来源

2016-07-09 12:05:46

使用引导程序缩小某些屏幕尺寸的输入字段

回答

相关问题