画面が小さい場合にテキストを中央に揃える768px

Question

テキストが中央に配置されたコンテナがあります。コンテナの中には、左に設定されたテキストのパネルがありますが、画面が小さくなり、電話機のようなタブレットになると、パネル内のテキストが中央に表示されます。

ここで私は何をしているのですか、メディアのクエリの仕組みがわからず、これは私にとってはうまくいきません。

このメディアクエリーは、私が使用しているものですが、敬遠しがちなHTMLが多く、より複雑ですが、あなたのメディアクエリーは、と何にも適用されている例

@@media all and (min-width:768px) { 
 
    .text-left { 
 
    text-align: center; 
 
    } 
 
}

<div class="container text-center"> 
 
    <div class="row"> 
 
    <div class="panel panel-default text-left"> 
 
     <div class="panel-body"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

ように簡略化したままは768px（すなわち、768px以上）です。あなたはそれよりも小さくしたいので、それをmax-widthに変更する必要があります。

@media(max-width:767px) { 
 
    .text-left { 
 
    text-align: center; 
 
    } 
 
}

<div class="container text-center"> 
 
    <div class="row"> 
 
    <div class="panel panel-default text-left"> 
 
     <div class="panel-body"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>