md上のブートストラップオフセットは機能しません

Question

こんにちは私はメディアデバイスだけにオフセットを追加しようとし、他のデバイスにこのオフセットを隠そうとしています。私は他のいくつかの同様の質問を見てみましたが、いずれかの私の問題を解決することができます。だから、問題は、それがどのようにすべき媒体上のすべてのデバイスだけでなく、上のオフセット追加することである

<div class="container"> 
<div class="row"> 
<div class="col-lg-3 col-md-3 col-sm-3" style="background-color: red"> 111 </div> 
<div class="col-lg-4 col-md-4 col-sm-5 col-sm-offset-1" style="background-color: blue"> 222 </div> 
<div class="col-lg-3 col-md-4 col-sm-1" style="background-color: black"> 333 </div> 
<div class="col-lg-2 col-md-1 col-sm-2" style="background-color: orange"> 444 </div> 
</div> 
</div> 

：

は、ここでは、コードです。大型の

画面：https://zapodaj.net/f4b34ebc771fb.png.html

Answer 1

私は、オフセットは、それ以外の場合は、以前の値を継承し、より大きな画面で「リセット」することが必要だと思います。 col-sm-offset-1 col-md-offset-0を使用して問題を修正しているようです。

<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-lg-3 col-md-3 col-sm-3" style="background-color: red"> 111 </div> 
 
<div class="col-lg-4 col-md-4 col-sm-5 col-sm-offset-1 col-md-offset-0" style="background-color: blue"> 222 </div> 
 
<div class="col-lg-3 col-md-4 col-sm-1" style="background-color: black"> 333 </div> 
 
<div class="col-lg-2 col-md-1 col-sm-2" style="background-color: orange"> 444 </div> 
 
</div> 
 
</div>

Answer 2

あなたがメディアデバイスにオフセットしたい場合col-md-offset-1なくcol-sm-offset-1を使用しています。

また、大きなデバイスのオフセットをcol-lg-offset-0でリセットする必要があります。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-3 col-md-3 col-sm-3" style="background-color: red">111</div> 
 
    <div class="col-lg-4 col-md-4 col-sm-5 col-md-offset-1 col-lg-offset-0" style="background-color: blue">222</div> 
 
    <div class="col-lg-3 col-md-4 col-sm-1" style="background-color: black">333</div> 
 
    <div class="col-lg-2 col-md-1 col-sm-2" style="background-color: orange">444</div> 
 
    </div> 
 
</div>