在zurb基礎同一行中對齊輸入控件

我是zurb基礎的初學者，並嘗試使用zurb基礎和asp.net窗體4.0來創建簡單的表單。在zurb基礎同一行中對齊輸入控件

因爲這是一項要求，所以我用'768px'固定了我的行。

我的結構是這樣

<div class="row"> 
    <div class="large-11 columns"> 
     <input type="text" placeholder="FIRST NAME:"> 
    </div> 
    <div class="large-1 columns">*</div> 
</div>

我採用這種結構，使我驗證失敗*旁邊的輸入框中顯示。這在桌面上運行良好。但是，當我測試它的屏幕寬度768pxels然後<div class="large-11 columns">採取所有的空間和驗證移動到下一行。

是他們的一種方法，我可以防止它，使它會在同一行中的兩列。

我不知道如何在zurb中做到這一點。

小提琴例http://jsfiddle.net/8ww2v/7/

來源

2014-07-13 Learning

爲了指定所有裝置，添加一個類的小型，中型和大型：

Updated Fiddle

<div class="row"> 
       <div class="small-11 medium-11 large-11 columns"> 
        <input type="text" placeholder="FIRST NAME:" /> 
       </div> 
       <div class="small-1 medium-1 large-1 columns">*</div> 
      </div> 
      <div class="row"> 
       <div class="small-11 medium-11 large-11 columns"> 
        <input type="text" placeholder="LAST NAME:" /> 
       </div> 
       <div class="small-1 medium-1 large-1 columns">*</div> 
      </div> 

      <div class="row"> 
       <div class="small-11 medium-11 large-11 columns"> 
        <input type="text" placeholder="EMAIL:" /> 
       </div> 
       <div class="small-1 medium-1 large-1 columns">*</div> 
      </div> 

      <div class="row"> 
       <div class="small-11 medium-11 large-11 columns"> 
        <textarea placeholder="ADDRESS"></textarea> 
       </div> 
       <div class="small-1 medium-1 large-1 columns">*</div> 
      </div>

爲了僅靶向片劑和桌面：

由於768px用於平板電腦，因此您將添加一類媒體。

試試這個：Fiddle

 <div class="row"> 
    <div class="medium-11 large-11 columns"> 
     <input type="text" placeholder="FIRST NAME:"/> 
    </div> 
    <div class="medium-1 large-1 columns">*</div> 
</div> 
<div class="row"> 
    <div class="medium-11 large-11 columns"> 
     <input type="text" placeholder="LAST NAME:"/> 
    </div> 
    <div class="medium-1 large-1 columns">*</div> 
</div> 

<div class="row"> 
    <div class="medium-11 large-11 columns"> 
     <input type="text" placeholder="EMAIL:"/> 
    </div> 
    <div class="medium-1 large-1 columns">*</div> 
</div> 

    <div class="row"> 
    <div class="medium-11 large-11 columns"> 
     <textarea placeholder="ADDRESS"></textarea> 
     </div> 
    <div class="medium-1 large-1 columns">*</div> 
</div>

來源

2014-07-13 22:59:26 Vahi

它不僅適用於平板電腦，我要定位到所有設備的移動和桌面。我試着選擇它，並將驗證'*'移動到下一行。 – Learning

添加一個小，中，大的類來定位所有設備。看到我更新的答案和小提琴。 – Vahi

基金會是一個移動優先的框架，每個規模都將最大限度地有效，因此不需要使用像「小-11中等-11大-11」這樣的東西，只需使用「小-11」就可以工作（除非你想要不同的尺寸，那麼你會把課堂） –

在zurb基礎同一行中對齊輸入控件

回答

相關問題