2017-03-18 8 views
1

私のフォームのフィールドをデスクトップとタブレットに異なる位置に配置したいと思います。今のところ、すべてデスクトップ上で問題ありません。私は2つの同様の場合があります。まず一つは、私はこのような何かを持っている(入力フィールドには、のdivの中にある):複数行のBoostrap行

<div class="row"> 
    <div class="col-md-3 col-sm-6"></div> 
    <div class="col-md-3 col-sm-6"></div> 
    <div class="col-md-3 col-sm-6"></div> 
</div> 
<div class="row"> 
    <div class="col-md-3 col-sm-6"></div> 
    <div class="col-md-3 col-sm-6"></div> 
    <div class="col-md-3 col-sm-6"></div> 
</div> 

それは、代わりに3番目と6番目の行に一つだけのフィールドを持つのタブレットに悪く見ていません、私は2つ持っていたいです。 1つの「行」を複数の行にまたがるようにするには、2つではなく1つの「行」を使用し、デスクトップで空の「col-md-3」を使用する必要がありますか?

<div class="row"> 
    <div class="col-md-3 col-sm-6"></div> 
</div> 
<div class="row"> 
    <div class="col-md-3 col-sm-6"></div> 
</div> 
<div class="row"> 
    <div class="col-md-3 col-sm-6"></div> 
</div> 

は、私は2つの最初のフィールドが同一線上になりたい:最後に

私は同様のケースを持っています。

ありがとうございました

答えて

0

このような意味ですか?

<div class="row"> 
    <div class="col-md-6 col-sm-6"> 
     <div class="col-md-6 col-sm-6"></div> 
     <div class="col-md-6 col-sm-6"></div> 
     <div class="col-md-12 col-sm-6"></div> 
    </div> 
</div> 
+0

私はそれを試していないが、私はそれが動作するとは思わない。一番上にcol-md-6を置くだけで、デスクトップデザインが変更されます。私はフォローしていません。 – user1319182

0

はい、単一.row要素でそれらのすべてを置きます。これは、列の折り返しとして知られています。

デモ:ブートストラップドキュメントからhttp://www.codeply.com/go/7mUSsbO8od

「12の以上の列が単一の列内に配置されている場合、追加の列の各グループは、1つのユニットとして上に折り返されます新しい行 "

column wrappingを示すドキュメントの例もあります。列の高さが異なる場合は、応答可能なリセットを使用する必要があるかもしれないことを覚えておいてください。