时间戳

首页 > 解决方案 > 重新定位小屏幕的行

css - 重新定位小屏幕的行

问题描述

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

所以有一个row, 和 2col-md-6来分隔左边和右边的元素。还行吧。

在此处输入图像描述

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

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

如何使用 Bootstrap 做到这一点？

代码笔：

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

HTML

<header class="header" id="header1">

    <div class="row">


        <div class="col-md-6">
            <div class="circle">
                <br>

                <div class="caption">
                    <h2 class="title display-3">Stickers <strong>Personalizados</strong></h2>
                    <p>Lorem m nisi! Eum vitae ipsam veniam, ullam explicabo quaerat asperiores veritatis nam
                        reprehenderit necessitatibus sequi.</p>
                </div>
                <div class="row">
                    <div class="col-md-5">

                        <a href="stickers" class="btn btn-azul text-white btn-block">Comprar</a>

                    </div>

                    <div class="col-md-5 my-home-banner-image">

                        <a href="{% url 'shop:SamplePackPage' %}" class="btn btn-naranja text-white btn-block">Muestras
                        </a>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <br>
            <img class="" src="https://www.austinhomebrew.com/assets/images/sticke-alt-8989.png" width="440px" height="300px">
        </div>

    </div>

</header>

参考：

在此处输入图像描述

更新 1：

我从 AnnieP 的回答中得到了这个结果。但：

如何在部分之间，特别是在按钮之间给出间距？

在此处输入图像描述

标签： csstwitter-bootstrap

解决方案

What you have should work, as far as the Bootstrap goes. col-md-6 is saying "I want this column to be 6-wide on screens greater than 767 px" and because you don't specify anything for col-xs and col-sm, by default every div with a .col- will be col-12, or full-width, on screens 767 and smaller. It looks like you don't have bootstrap hooked up to the Codepen, so it won't act responsively there, but it should when Bootstrap is working. It looks like you have a lot of CSS in there that's trying to handle what Bootstrap's columns would do for you. For instance the following CSS that you have should all be handled with <div class="col-md-6">:

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

What you need to do is change the CSS using media queries for the text size change and the image sizing/positioning. Your image is set with absolute positioning, which is why it's on top of the buttons when it responsively adjusts to a smaller screen. Instead, utilize Bootstrap's grid system and give it col-md-6 as well. Here's the general outline of all you should need:

<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>

Revisit the Bootstrap getting started docs if you need help setting it up, and you likely don't need most of the CSS in your Codepen.

Update:

To achieve spacing below sections, you can add a wrapper div with class="row", but that won't work for the buttons because they start on the same row. In that case, you'll want to add margin-bottom in the css. For example:

.btn {
  margin-bottom: 10px;
}

推荐阅读