Bootstrap - 小型设备上的新产品线

Question

我正在使用Bootstrap，我有这一行：

<p>{{ user.email }} <span class="pull-right">{{ user.role }}</span></p>

如果设备尺寸为＆＃34; xs＆＃34;？

，我怎样才能使跨度换上新线？

Answer 1

您可能不得不使用自定义类，因为pull-right类会发生干扰，因为默认设置为!important。

或者您可以在另一个类上使用!important来覆盖它。

请参阅整页的代码段中的工作示例。

body, html {
  margin-top: 50px;
}
.new-class {
  float: right;
}
@media (max-width: 767px) {
  .new-class {
    display: block;
    float: none;
  }
  .newer-class {
    display: block;
    float: none !important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="alert alert-info">
    <p>email <span class="new-class">role</span>

    </p>
  </div>
</div>
<hr>
<div class="container">
  <div class="alert alert-danger">
    <p>email <span class="newer-class pull-right">role</span>

    </p>
  </div>
</div>