html - 如果屏幕小于 768px，则将文本居中对齐

Question

我有一个文本居中的容器。在容器内，我有一个文本设置为左侧的面板，但是当屏幕变得比平板电脑小到手机之类的东西时，我希望面板中的文本居中。

这是我正在做的，但不确定媒体查询是如何工作的，这对我不起作用。

这个媒体查询是我正在使用的，但是 hte 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

您的媒体查询将应用于 min-width 为 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>