代替レイアウトはサイズに基づいて

私は内部ウェブサイトの今後のすべてのページにブートストラップを使用するという考えを楽しませています。次の画像は、すべてのサイズのデバイスに適しています。代替レイアウトはサイズに基づいて

enter image description here

問題は、私は、各ラインのための2つの水平方向のラベルと入力を含む1行を使用したことです。ブートストラップのサイズが変更されると、行がマージされます。問題は、2つの列が別々のサブジェクトであり、デバイスビューポートが小さい場合は、右側の列が左の列の下に位置することです。代わりにそれらはマージされます。左の列項目1が最初で、次に右の項目項目1が2番目です。私はあまりにも左の列のすべてをする必要がありますし、すべての右の列。

この問題の方向性は非常に役に立ちます。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.header{ 
 
    text-align: center; 
 
    border: 2px solid blue; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
    border: 2px solid blue; 
 
} 
 
h1{ 
 
    margin: auto; 
 
} 
 
.body{ 
 
    border: 2px solid blue; 
 
    margin-top: 10px; 
 
} 
 
.inline{ 
 
    display: inline-block; 
 
} 
 

 
.no-margin{ 
 
    margin: 0px; 
 
} 
 

 
label{ 
 
    width: 140px; 
 
    margin-right: 5px; 
 
    text-align: left; 
 
    white-space: nowrap; 
 
} 
 

 
input{ 
 
    margin-left: 0px; 
 
    margin-top: 10px; 
 
} 
 

 
.left_margin{ 
 
    margin-top: 10px; 
 
    margin-left: 230px; 
 
} 
 

 
@media screen and (min-width: 768px){ 
 
    label{ 
 
    text-align: right; 
 
    } 
 

 
    input{ 
 
    margin-left: 10px; 
 
    margin-top: 10px; 
 
    } 
 
}

<div class="col-lg-12 header"><h1 class="lead">Test</h1></div> 
 

 
<div class="body"> 
 
    <div class="container"> 
 
    <form class="form-inline" role="form"> 
 

 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div>  
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div>  
 
     <div class="row">  
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div>  
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div>  
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div>  
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> 
 
      <label for="input_test" class="control-label inline">Label</label> 
 
      <div class="form-group"> 
 
      <div> 
 
       <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> 
 
      </div> 
 
      </div> 
 
     </div>   
 
     </div> 
 
     
 
    </form> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

出典

2016-07-07 Schylar

**最小限の作業例を投稿してください。**あなたのコード（HTML/CSS/JS）の[スニペット]で（ https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。 [mcve]と[ask]を参照してください。 – vanburen

ブートストラップのウェブサイトの列のネストについてお読みください。 – BrainHappy

idは一意でなければなりません。
col-lg-6 col-md-6 col-sm-12 col-xs-12は、col-md-6に相当します。
フィールドの左右の列を2つの<div class="col-md-6"></div>ブロックで囲みます。
Inline formの代わりにHorizontal formを使用する必要があります。
ブロックを<div class="form-group"></div>ブロックに配置します。
残りのスペースを非浮動ブロックで埋めるには、ラベルを左浮動にしてhidden: overflow;トリックを使用します。

結果を確認してください：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.header{ 
 
    text-align: center; 
 
    border: 2px solid blue; 
 
} 
 
h1.lead { 
 
    margin: 0; 
 
    padding: 12px; 
 
} 
 

 
.body{ 
 
    border: 2px solid blue; 
 
    margin-top: 10px; 
 
    padding-top: 12px; 
 
} 
 
.form-horizontal .form-group { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 
.form-horizontal .control-label { 
 
    display: block; 
 
    float: left; 
 
    margin-bottom: 0; 
 
    margin-right: 20px; 
 
    padding-top: 7px; 
 
    white-space: nowrap; 
 
} 
 
.form-horizontal .form-control { 
 
    width: 100%; 
 
} 
 
.fill-free-space { 
 
    overflow: hidden; 
 
}

<div class="header"><h1 class="lead">Test</h1></div> 
 

 
<div class="body"> 
 
    <div class="container"> 
 
    <form class="form-horizontal" role="form"> 
 
     <div class="row"> 
 
     
 
     <div class="col-md-6"> 
 
      <div class="form-group"> 
 
      <label for="input_left_1" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_left_1" placeholder="Left"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="input_left_2" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_left_2" placeholder="Left"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="input_left_3" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_left_3" placeholder="Left"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="input_left_4" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_left_4" placeholder="Left"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="input_left_5" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_left_5" placeholder="Left"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="col-md-6"> 
 
      <div class="form-group"> 
 
      <label for="input_right_1" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_right_1" placeholder="Right"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="input_right_2" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_right_2" placeholder="Right"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="input_right_3" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_right_3" placeholder="Right"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="input_right_4" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_right_4" placeholder="Right"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="input_right_5" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_right_5" placeholder="Right"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="input_right_6" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_right_6" placeholder="Right"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="input_right_7" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_right_7" placeholder="Right"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="input_right_8" class="control-label">Label</label> 
 
      <div class="fill-free-space"> 
 
       <input class="form-control" type="text" id="input_right_8" placeholder="Right"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     </div>   
 
    </form> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

出典

2016-07-07 04:06:13

ありがとうございます。これはとても役に立ちました！ – Schylar

代替レイアウトはサイズに基づいて

答えて

関連する問題