CSS引導：自動調整輸入字段和按鈕的大小

我有一個文本類型的輸入字段，並且我有一個「搜索」按鈕。我希望這兩個對象水平對齊;按鈕的大小與輸入字段佔用空間的其餘部分一樣大。我一直在用CSS嘗試，但無濟於事。CSS引導：自動調整輸入字段和按鈕的大小

我正在使用RoR，並使用Bootstrap庫。我想知道是否有什麼東西可以使這項工作成爲可能。我也嘗試過使用flexbox，但輸入欄似乎有自己的想法。以下是有問題的代碼。

<div class="mini-layout fluid"> 
<div class="mini-layout-body"> 
    <h2>Shows</h2> 
</div> 
<div class="mini-layout-sidebar"> 
    <div class="search_container"> 
     <input id="search_shows_text" type="text" class="search-query"> 
     <button id="search_shows_button" 
      type="submit" class="btn btn-primary">Search</button> 
    </div> 
</div> 
</div>

我已經能夠得到search_container類水平放置的東西出來，但得到它的孩子們適當地調整已設法逃脫了我一整天。

任何幫助，非常感謝。

編輯感謝Krishnan和SO社區，我得到了解決方案的工作。以下是其他人的代碼。

HTML
搜索

CSS

.search_container 
{ 
    text-align:center; 
    margin-top: 5px; 
} 

.text_area 
{ 
    width: 55%; //Change as per your requirement 
    display: inline-block; 
    margin: auto; 
} 

.but_area 
{ 
    width: 25%; //Change as per your requirement 
    margin: auto; 
}

來源

2013-07-23 Black Dynamite

您能否在您的問題中添加小提琴，以便我們看到問題的實際效果？ – vijrox

bootply.com是放置此文件的好地方 – vijrox

@FlexField默認情況下，引導程序將其輸入字段大小設置爲某個預定義的值。您可以覆蓋它以使您的輸入字段符合您的需求。 –

默認情況下，引導有寬度設置爲206px文本區域和71px的提交按鈕。所以爲了使它符合你的要求，你必須重寫這些默認屬性。我可能會做這樣的事情。

創建一個類text_area與自定義屬性

.text_area 
{ 
    width: 85%; //Change as per your requirement 
}

創建一個類but_area與自定義屬性

.but_area 
{ 
    width: 10%; //Change as per your requirement 
}

，並會在輸入文本區域和按鈕的使用。

<input id="search_shows_text" type="text" class="search-query text_area"> 
    <button id="search_shows_button" 
     type="submit" class="btn btn-primary but_area">Search</button>

它會讓我文本區域佔據的空間和按鈕的85％，佔據10％的空間在我的窗口和剩餘的空間5％是免費的離開了。

來源

2013-07-23 06:16:00

@Amaranth Krishnan這是一個足夠好的答案，讓我能夠在幾分鐘內走到一個解決方案的道路上。如果其他人絆倒了同樣的問題，這裏是實際工作的HTML/CSS。 –

CSS引導：自動調整輸入字段和按鈕的大小

回答

相關問題