以Bootstrap形式更改輸入大小inline

我需要縮小bootstrap 3中的輸入大小，因爲它對我的導航欄來說太大了。以Bootstrap形式更改輸入大小inline

我試着用

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

來源

2015-12-11 JoaquínFdez

從提供的HTML代碼，我會說使用「控制上漿」的引導提供： Bootstrap: Control Sizes

你說，這是很大的一個輸入窗體裏面的導航欄中是否添加類

navbar-form

其中在自舉使用，只要實施例給出：

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

來源

2015-12-11 13:23:42 Kieken72

下form-inline所有輸入都寬度設置爲自動。

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

來源

2015-12-11 13:37:53 Morpheus

你可以設置你的窄投入和使用max-width財產的替代類，你可以把它作爲響應元素：如果你想讓他們較窄添加你自己的風格。

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

來源

2015-12-11 13:51:57

嘗試使用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>

來源

2015-12-11 13:54:37

@ JoaquínFdez，你找到解決方案嗎？ –

我的導航欄

最佳的解決方案是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>

來源

2015-12-13 21:22:01

以Bootstrap形式更改輸入大小inline

回答

相關問題