如何讓一些東西不以響應形式包裝？

我正在嘗試創建一個響應式窗體，其中一些事物包裝，其他人不包含。如何讓一些東西不以響應形式包裝？

我想的形式，看起來像這樣在桌面

enter image description here

像這樣在移動

enter image description here

注意，圖標保持向右。不幸的是，我不能使用背景圖像作爲圖標，因爲我需要顯示懸停圖標上的工具提示。

當我嘗試這一點，但是，圖標包：

enter image description here

那麼，如何才能讓圖標是它自己的元素（SPAN或DIV），但不換行下面的文本字段？

這是一個嘗試：http://jsfiddle.net/XVu6V/

這裏是一個自舉3嘗試：http://jsfiddle.net/syhLJ/1/我真的很喜歡使用引導。

下面是一些HTML：

<div text-element class="form-group row"> 
    <label for="firstName" class="col-md-2 control-label">First Name</label> 
    <div class="col-md-5"> 
     <input type="text" class="form-control" id="firstName" /> 
    </div> 
    <div class="col-md-1 validation-icon required"></div> 
    <div class="col-md-3 validation-message"> 
     Needed for communication. 
    </div> 
</div>

來源

2014-04-28 Chad Johnson

您可以使用背景圖像和靜止顯示工具提示。只需將其設置在div上，而不是標記。 –

可以疊加COL-XX-XX在一起，沒有覆蓋引導的默認樣式。

http://jsfiddle.net/99SFW/2/

<div class="container"> 
    <form class="form-horizontal" role="form"> 
     <div text-element class="form-group row"> 
      <label for="firstName" class="col-md-2 col-sm-2 col-xs-12 control-label">First Name</label> 
      <div class="col-md-5 col-sm-5 col-xs-9"> 
       <input type="text" class="form-control" id="firstName" /> 
      </div> 
      <div class="col-md-1 col-sm-1 col-xs-1 validation-icon required"></div> 
      <div class="col-md-3 col-sm-12 col-xs-12 validation-message">Needed for communication.</div> 
     </div> 
    </form> 
</div>

enter image description here

來源

2014-04-28 20:32:16 Win

不錯!!!這似乎運作良好。添加工具提示後，它們也顯示在正確的位置。謝啦！ –

不是真的最佳，但你可以試試絕對定位的輸入，將其浮動到左側時，較小的屏幕上，而浮動圖標右側。然後我猜想輸入的百分比會讓你和圖標之間有一定的距離。

.form-group .form-control { 
    position: absolute; 
    float: left; 
}

來源

2014-04-28 20:16:27 Reeve

爲什麼不換圖標和<input>一個div內，該分區設置爲position:relative，並添加padding-right的圖標相同的寬度。然後設置<input> 100％寬和圖標position:absolute;top:0;right:0？這會迫使圖標始終坐在<input>的右側。

類似於http://jsfiddle.net/syhLJ/7/。

您可以在http://fiddle.jshell.net/syhLJ/7/show/上查看它的HTML預覽，我使用這個解決方案相當多，迄今爲止從未失敗過。

來源

2014-04-28 20:17:08 dotty

由於我不想使用引導程序，因此您的答案在我的情況下有效。謝謝。 – Robert

我已經更新了你的提琴here

的HTML是這樣的......

<form> 
    <div> 
     <label for="firstName" class="label">First Name</label> 
     <div class="input"> 
      <input type="text" class="form-control" id="firstName" /> 
     </div> 
     <div class="icon">R</div> 
     <div class="validation">Needed for communication.</div> 
    </div> 
</form>

而CSS

.input { 
    float: left; 
    width:calc(100% - 35px); 
    max-width: 500px; 
} 
.icon { 
    float: left; 
    background-color: orange; 
    width: 32px; 
    height: 32px; 
    display: block; 
    margin: 0 4px; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 30px; 
    color: white; 
    font-weight: bold; 
} 

.validation { 
    float: left; 
}

來源

2014-04-28 20:18:51 spacemigas

或者你也可以浮動按鈕右側和阻力它有一個負邊界。

.form-group .validation-icon { 
    float: right; 
    margin-top: -33px; 
} 
@media (min-width: 992px) { 
    .form-group .validation-icon { 
    float: left; 
    margin-top: 0;  
    } 
} 
.form-control { 
    width: 90%; 
}

http://jsfiddle.net/Anp7s/2/

來源

2014-04-28 20:20:53 Kunsang

如何讓一些東西不以響應形式包裝？

回答

相關問題