引導中心組輸入搜索字段

下面是使用最新的引導V3引導中心組輸入搜索字段

/*here is the specialjum class in css*/ 
 

 
.specialjum { 
 
    background: #1F72B8; 
 
    background-size: cover; 
 
    min-height: 600px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<div class="jumbotron specialjum"> 
 
    <div class="row"> 
 
    <h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6> 
 
    </div> 
 
    <div class="col-lg-6 col-lg-offset-4"> 
 
    <div class="input-group"> 
 
     <span class="input-group-btn"> 
 
       <button class="btn btn-secondary" type="button">Go!</button> 
 
      </span> 
 
     <input type="text" class="form-control" placeholder="Search for..."> 
 
    </div> 
 
    </div> 
 
</div>

沒有其他引導已被修改，我的代碼。現在，當我使用上面的代碼，按鈕被固定到輸入字段按預期方式和輸入組獲取中心在jumbotron div標記但是，如果我在輸入文本後更換跨度按鈕該按鈕是關閉正確的。

此處爲達

以下代碼

.specialjum { 
 
    background: #1F72B8; 
 
    background-size: cover; 
 
    min-height: 600px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<div class="jumbotron specialjum"> 
 
    <div class="row"> 
 
    <h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6> 
 
    </div> 
 
    <div class="col-lg-6 col-lg-offset-4"> 
 
    <div class="input-group"> 
 
     <input type="text" class="form-control" placeholder="Search for..."> 
 
     <span class="input-group-btn"> 
 
       <button class="btn btn-secondary" type="button">Go!</button> 
 
      </span> 
 
    </div> 
 
    </div> 
 
</div>

通知唯一的區別是，其中按鈕位於前或輸入標記之後。

注：自舉V3 - 不做任何修改

請幫忙謝謝=）

來源

2016-01-04 Carl Finch

綜觀[引導文件]（http://v4-alpha.getbootstrap.com/components/input-group/#button-addons），這不就是對預期的方式該按鈕的行爲？ – boyomarinov

我正在查看你的代碼，並用它構建了一個codepen，我發現你的代碼絕對沒有錯。你能用塗料展示你的預期結果來塗鴉圖像嗎？ – LOTUSMS

好的，我現在看到。您的輸入組向右移動。 – LOTUSMS

什麼是您使用引導程序的確切版本？對不起，我想問這是一個評論，但我不能發佈一個由於低代表。

對於引導3.3.6

只要給.input-group具體width和margin: 0 auto;，你是好去，例如

.input-group { 
 
    width: 20%; 
 
    /* Works for px values too */ 
 
    margin: 0 auto; 
 
} 
 
.specialjum { 
 
    background: #1F72B8; 
 
    background-size: cover; 
 
    min-height: 600px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<div class="jumbotron specialjum"> 
 
    <div class="row"> 
 
    <h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6> 
 
    </div> 
 
    <div class="col-lg-6 col-lg-offset-4"> 
 
    <div class="input-group"> 
 
     <input type="text" class="form-control" placeholder="Search for..."> 
 
     <span class="input-group-btn"> 
 
       <button class="btn btn-secondary" type="button">Go!</button> 
 
      </span> 
 
    </div> 
 
    </div> 
 
</div>

上述作品爲您提供的HTML標記的兩個場合。

見（包含在擺弄各種場合：與PX和％值都HTML標記爲.input-groupwidth）working fiddle

來源

2016-01-06 21:50:14 gmanou

謝謝，我會試試看。 –

這是如何回答OP的問題？我正在看他的代碼，沒有什麼不對。而你的代碼只是將輸入組的大小調整爲200px，這與.form-control類相矛盾。如果輸入組類需要調整大小，這不是實現它的方法。響應失去了這一點。 – LOTUSMS

如果您指定％寬度值，您可以具有響應能力並保持居中（更新後的答案更清晰）。儘管如此，這個anser是一個純粹的css解決方案，如果這是爲了不使用bootstrap的內置功能而被指責。很好的答案btw。 – gmanou

引導3是移動第一框架，我提起這事，因爲我注意到您使用col-lg-*類與它的偏移變體。 col-lg-*類是專門爲非常大的顯示器製作的。一個不會被你的用戶經常使用的。如果您使用Bootstrap作爲樣板而對響應速度沒有任何興趣，那麼col-md-*類對您最有幫助。但是，如果您是爲快速響應編碼的，那麼您應該首先聲明移動大小並開始工作。 Bootstrap 3的設計方式非常智能化，除非佈局更改，否則無需聲明較大的設備，因爲它會將您的較小設備聲明作爲規則。

例如，

如果編碼的東西col-xs-12，這將是12列跨越一路桌面。
如果編碼的東西col-xs-6，這將是6列跨越一路桌面
如果編碼的東西col-md-6，你會得到在桌面上，但最有可能您的平板電腦將成爲12列跨度，和你的手機設備將絕對是12列的跨度。除非另有指示，否則它總是默認移動到12列。

使用Bootstrap 3，我們已經將項目從一開始就改寫爲移動友好。他們沒有添加可選的移動樣式，而是直接進入了核心。事實上，Bootstrap首先是移動的。移動第一種樣式可以在整個庫中找到，而不是在單獨的文件中找到。 - Bootstrap docs

因此，考慮到這一點，請嘗試從col-xs- *開始。

好了，現在，你的中心問題（不是假設你編碼的響應，但對於桌面只），所有你需要做的是調整你的類是這樣的：

取而代之的是

<div class="col-lg-6 col-lg-offset-4">

使用此

<div class="col-md-6 col-md-push-3">

如果你想充分利用反應性，做到以下幾點：

<div class="col-xs-12 col-sm-6 col-sm-push-3 col-md-6 col-md-push-3">

見我DEMO

來源

2016-01-09 00:56:41 LOTUSMS

引導中心組輸入搜索字段

回答

相關問題