小屏幕的重新定位行

Question

我正在使用引导程序将标头元素分布在两列中。

因此有一个public static void moveLauncherTaskToFront(Context context) { ActivityManager activityManager = (ActivityManager) context.getSystemService(Context.ACTIVITY_SERVICE); assert activityManager != null; final List<ActivityManager.AppTask> appTasks = activityManager.getAppTasks(); for (ActivityManager.AppTask task : appTasks) { final Intent baseIntent = task.getTaskInfo().baseIntent; final Set<String> categories = baseIntent.getCategories(); if (categories != null && categories.contains(Intent.CATEGORY_LAUNCHER)) { task.moveToFront(); return; } } } ，其中有2个row，用于将元素左右分开。没关系。

但是当调整为智能手机大小时，我想按此顺序显示项目（从上到下）：

1）文本（我想在顶部显示，但要减小字体大小）
2）按钮（位于另一个按钮的顶部）
3）图片（较小的图片无关紧要）。

如何使用Bootstrap做到这一点？

CodePen：

https://codepen.io/ogonzales/pen/ebKNoK

HTML

col-md-6

参考：

更新1：

我从AnnieP的答案中得到此结果。但是：

如何在各节之间，尤其是在按钮之间留出间距？

Answer 1

就Bootstrap而言，您所拥有的应该可以工作。 col-md-6 is saying“我希望此列在大于767像素的屏幕上为6宽”，并且因为默认情况下您没有为col-xs和col-sm指定任何内容在屏幕767和更小的屏幕上，每个具有.col-的div将是col-12或全角。看来您没有将Bootstrap连接到Codepen，所以它在那里不会做出响应，但是应该在Bootstrap运行时使用。看来您那里有很多CSS，它们正在尝试处理Bootstrap的列为您提供的服务。例如，您拥有的以下CSS应该全部用<div class="col-md-6">处理：

/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
.header .center {
  width: 50%;
}

您需要做的是更改CSS using media queries，以更改文本大小和调整图像大小/位置。您的图像设置有绝对的位置，这就是为什么当它响应地调整为较小的屏幕时，它位于按钮的顶部。相反，请利用Bootstrap的网格系统并为其指定col-md-6。以下是您所需的全部概述：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2>Stickers Personalizados</h2>
      <p>Lorum impsum</p>
      <div class="row">
        <div class="col-md-6">
          <a href="stickers" class="btn btn-azul text-white btn-block">Comprar</a>
        </div>
        <div class="col-md-6">
          <a href="{% url 'shop:SamplePackPage' %}" class="btn btn-naranja text-white btn-block">Muestras</a>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <img class="" src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png" width="440px" height="300px">
    </div>
  </div>
</div>

如果需要帮助来设置Bootstrap getting started docs，并且您可能不需要Codepen中的大多数CSS。

更新：

要在各部分之间保持间距，可以用div添加一个包装器class="row"，但这不适用于按钮，因为它们从同一行开始。在这种情况下，您需要在CSS中添加margin-bottom。例如：

.btn {
  margin-bottom: 10px;
}