Question

我需要缩小bootstrap 3中输入的大小，因为它对我的导航栏来说太大了。

我试过

<label class="col-sm-2 sr-only" for=”email">Email   address</label>

但它没有用。

<div class="col-sm-2 form-group">

无论是

<input  type="email" width="60px" class="form-control" id=”email"   placeholder="Email">

<form class="form-inline">  
    <div class="form-group">    
        <label class="sr-only" for=”email">Email address</label>    
        <input type="email" class="form-control" id=”email" placeholder="Email">    
    </div>  
    <div class="form-group">        
        <label class="sr-only" for=”password">Password</label>      
        <input type="password" class="form-control" id=”password"   placeholder="Password"> 
    </div>  
    <div class="checkbox">  
        <label>
        <input type="checkbox">Remember me</label>  
    </div>  
    <buRon type="submit" class="btn btn-default">Sign in</buRon>    
</form>

Answer 1

您可以为窄输入设置备用类，并使用max-width属性，可以将其保留为响应元素。

input.my-narrow-input {max-width:200px;}

Answer 2

从提供的HTML代码我会说使用Bootstrap提供的'Control Sizing'： Bootstrap: Control Sizes

你说在nav-bar里面输入表单是很大的，你添加了类

navbar-form

在bootstrap提供的示例中使用了以下内容：

<form class="navbar-form navbar-right">
   <div class="form-group">
      <input type="text" placeholder="Email" class="form-control">
   </div>
   <div class="form-group">
      <input type="password" placeholder="Password" class="form-control">
   </div>
   <button type="submit" class="btn btn-success">Sign in</button>
</form>

Answer 3

form-inline下的所有输入都将宽度设置为自动。如果您希望它们更窄，请添加自己的样式：

@media (min-width: 768px) {
    .form-inline .form-control {
        width: 100px;
    }
}

Answer 4

尝试在另外一个包装器中使用input，例如：

<form class="form-inline">  
  <div class="form-group">    
    <label class="sr-only" for=”email">Email address</label>    
    <div class="col-sm-2"><input type="email" class="form-control" id=”email" placeholder="Email"></div>    
</div>  
<div class="form-group">        
    <label class="sr-only" for=”password">Password</label>      
    <div class="col-sm-2"><input type="password" class="form-control" id=”password"   placeholder="Password"></div> 
</div>  
<div class="checkbox">  
    <label>
    <input type="checkbox">Remember me</label>  
</div>  
<button type="submit" class="btn btn-default">Sign in</button>

Answer 5

我的导航栏的最佳解决方案是Kamuran和Kieken72的混合：

<form   class="navbar-form navbar-right">
<div    class="form-group">
<label  class="sr-only" for=”email">Email   address</label>
<input type="email" class="form-control my-narrow-input"    id=”email"    placeholder="Email">
</div>
<div    class="form-group">
<label  class="sr-only" for=”password">Password</label>
<input  type="password" class="form-control my-narrow-input"     id=”password"  placeholder="Password">
</div>
<div    class="checkbox">
<label> <input  type="checkbox">    <span style="color:white">Remember   me</span></label>
</div>
<buRon  type="submit"   class="btn  btn-sm btn-info">Sign   in</buRon>
</form>

在Bootstrap form-inline中更改输入的大小

5 个答案: