大きな画面では正しければ小さい画面を中心にラベルを付けます

Question

小さな画面に自分のラベルを配置する方法を考えていますが、大画面で正しく表示する方法を考えています。

css

.left-form{ 
    text-align: right; 
} 

@media (min-width: 768px) { 
    label{ 
     text-align: center !important; 
    } 
} 

html

<div class="form-group row"> 
    <div class="col-md-2 col -xs -6 left-form"> 
     <label for="codeDemarche">label</label> 
    </div> 

    <div class="col-md-3"> 
     <input class="form-control" type="text" disabled id="codeDemarche" name="codeDemarche"> 
    </div> 
</div> 

Answer 1

使用モバイル最初のアプローチ。まず、モバイルデバイスのように見えるようにしてから、大きな画面用のメディアクエリを追加します。

また、同じセレクタを使用してください。

.left-form { 
    text-align: center; /* default */ 
} 

@media (min-width: 768px) { /* only "big" screens */ 
    .left-form { /* instead of label */ 
     text-align: right; 
    } 
}