Question

我有一个文本居中的容器。在容器内部，我有一个面板，文本设置为左侧，但是当屏幕变小时，平板电脑就像手机一样，我希望面板中的文本居中。

以下是我正在做的事情，但不确定媒体查询是如何运作的，这对我来说并不适用。

这个媒体查询是我正在使用的，但hte html要复杂得多，但是简化为例子

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您的媒体查询适用于min-width为768像素（即大于或等于768像素）的任何内容。由于您需要的数量少于此值，因此需要将其更改为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>

如果屏幕小于768px，则将文本对齐到中心

1 个答案: