內聯形式的引導全寬文本輸入

109

我很努力地創建一個適合我的容器區域的整個寬度的文本框。內聯形式的引導全寬文本輸入

<div class="row"> 
    <div class="col-md-12"> 
     <form class="form-inline" role="form">   
       <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)"> 
       <button type="submit" class="btn btn-lg">Search</button>    
     </form> 
    </div> 
</div>

當我這樣做時，這兩個表單元素是內聯的，正如我所期望的那樣，但最多不超過幾列。徘徊在螢火蟲col-md-12 div顯示它佔用預期的全寬。這只是文字輸入，似乎沒有填充。我甚至嘗試添加一個內聯寬度值，但它沒有改變任何東西。我知道這應該很簡單，現在感覺真的很愚蠢。

這裏是一個小提琴：http://jsfiddle.net/52VtD/4119/embedded/result/

編輯：

選擇的答案是在各方面都和美妙的幫助徹底。這就是我最終使用的。然而我想我最初的問題，實際上是在Visual Studio 2013中的默認模板MVC5問題載於本中的site.css：

input, 
select, 
textarea { 
    max-width: 280px; 
}

顯然，這是從適當擴大阻止文本輸入.. 。公平的警告未來的ASP.NET模板的用戶...

來源

2014-04-01 Killnine

我只是想用默認的MVC5模板來發現您的問題。我只花了一個小時研究這個問題，並在Bootstrap中詛咒，然後在jsfiddle中找到了一個工作示例，這促使我再次用乾淨的HTML頁面開始工作，並且它工作正常。之後我才發現VS2013模板存在問題，並且遇到了這篇文章。善良知道爲什麼決定最大寬度，但它表明你必須小心使用其他人的代碼。當遇到像這樣的問題時，迴歸基礎知識也是證明。 –

謝謝，也使用asp.net模板，但我已經將輸入的最大寬度設置爲無，但它仍然不佔用整個寬度，僅當我手動將其設置爲100％時。但是，它的右邊的按鈕關閉了，我希望它保持在同一行。 –

@Killnine在你的問題編輯解決了我的頭痛。事實上是這個問題，謝謝你編輯你的帖子！ –

的引導文檔says about this：

需要自定義寬度輸入，選擇和文字區域是寬100％通過Bootstrap中的默認值爲0。要使用內聯表單，您必須在其中使用的表單控件上設置寬度爲。

的100％，因爲所有的表單元素默認寬度變時，他們得到了類form-control如果使用form-inline類表單上並不適用。

你可以看看在bootstrap.css（或.LESS，任何你喜歡的），你會發現這部分：

.form-inline { 

    // Kick in the inline 
    @media (min-width: @screen-sm-min) { 
    // Inline-block all the things for "inline" 
    .form-group { 
     display: inline-block; 
     margin-bottom: 0; 
     vertical-align: middle; 
    } 

    // In navbar-form, allow folks to *not* use `.form-group` 
    .form-control { 
     display: inline-block; 
     width: auto; // Prevent labels from stacking above inputs in `.form-group` 
     vertical-align: middle; 
    } 
    // Input groups need that 100% width though 
    .input-group > .form-control { 
     width: 100%; 
    } 

    [...] 
    } 
}

也許你應該在input-groups看一看，因爲我想他們恰好有您要使用的標記（工作小提琴here）：

<div class="row"> 
    <div class="col-lg-12"> 
    <div class="input-group input-group-lg"> 
     <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)"> 
     <span class="input-group-btn"> 
     <button class="btn btn-default btn-lg" type="submit">Search</button> 
     </span> 
    </div> 
    </div> 
</div>

來源

2014-04-01 00:49:48

看到我上面的修改。我認爲ASP.NET模板中的Site.css可能讓我接觸到了這個。但是，這是一個了不起的答案，對未來的參考很有幫助。 – Killnine

輸入組是進行此工作的方式。就我個人而言，當我不希望緊挨輸入旁邊的按鈕時，我將輸入組樣式調整爲類似於內聯表格。包含Bootstrap的工作演示包括：http://jsfiddle.net/silb3r/gwxc5c75/ – cfx

很好！我知道這個問題是bootstrap特定的，但是如果其他人想把它放到bootstrapless（不是bootstrap LESS;）站點，我已經在這裏提取了相關的樣式：http://stackoverflow.com/a/27413796/1241736 – henry

看看是這樣的：

<form role="form"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <div class="input-group input-group-lg"> 
      <input type="text" class="form-control" /> 
      <div class="input-group-btn"> 
      <button type="submit" class="btn">Search</button> 
      </div><!-- /btn-group --> 
     </div><!-- /input-group --> 
     </div><!-- /.col-xs-12 --> 
    </div><!-- /.row --> 
</form>

http://jsfiddle.net/n6c7v/1/

來源

2014-04-01 00:56:05 haxxxton

正如a similar question陳述，嘗試input-group類刪除實例，看看是否有幫助。

指的引導：

個人窗體控件自動接收一些全球性的造型。所有文本，和 .form-control元素設置爲寬度：100％;默認。將標籤和控件包裹在.form-group中以獲得最佳間距。

來源

2015-10-15 07:30:54 kurdtpage

按照默認，這不適用於內聯表單。因此，您需要輸入組來強制它成爲100％ – user441058

內聯形式的引導全寬文本輸入

回答

相關問題