一个高的 div 在桌面上与两个较短的 div 相邻，并在带有 Bootstrap 4 的移动设备上堆叠 [英] One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4

查看：17
本文介绍了一个高的 div 在桌面上与两个较短的 div 相邻，并在带有 Bootstrap 4 的移动设备上堆叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这与

我在描述这个时遇到了很多麻烦，所以我希望这些图片有帮助！

这是一个通过复制代码工作的代码片段:

const Main = () =>(
<div className="容器"><div className="row"><div className="col-12 d-md-none"><div className="text-center"><span className="text-uppercase small-text small-text--lighter">步骤 2</span>

<div className="text-center"><h2 className="text-center">HEADER 2</h2>

<div className="col-12 col-md-6"><img alt="tbd" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"/>

<div className="col-12 col-md-5 offset-md-1 text-center text-md-left"><div className="d-flex flex-column justify-content-between align-items-center align-items-md-start"><div className="d-none d-md-block"><span className="text-uppercase small-text small-text--lighter">步骤 2</span>

<div className="d-none d-md-block"><h2 className="">HEADER 2</h2>

<div><p>一些段落文本</p>

</节>)ReactDOM.render(<主/>,document.getElementById("反应"));

img {高度:自动；宽度:100%；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="样式表"/><div id="react"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

解决方案

对于较大的宽度，您必须禁用 flexbox，因为 Bootstrap 4 的 flexbox 使列具有相同的高度.然后，使用浮点数使 B &C 列自然向右拉，因为 A 更高.flexbox order- 将用于重新排序移动设备上的列...

A-B-C 桌面，B-A-C 移动

<div class="row d-flex d-lg-block"><div class="col-lg-6 order-1 float-left">一种
<div class="col-lg-6 order-0 float-left">乙
<div class="col-lg-6 order-1 float-left">C

相关:移动版上不同顺序的引导程序

This is similar to this question here but slightly different.

I want to re-order three divs on mobile and have them side-by-side on desktop. See the attached pictures of the desired results:

I was having a lot of trouble describing this so I hope the pictures help!

EDIT: Here is a code snippet that works by duplicating code:

const Main = () => (
<section className="" id="section-2">
      <div className="container">
        <div className="row">
          <div className="col-12 d-md-none">
            <div className="text-center">
              <span className="text-uppercase small-text small-text--lighter">step 2</span>
            </div>
            <div className="text-center">
              <h2 className="text-center">HEADER 2</h2>
            </div>
          </div>
          <div className="col-12 col-md-6">
            <img alt="tbd" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png" />
          </div>
          <div className="col-12 col-md-5 offset-md-1 text-center text-md-left">
            <div className="d-flex flex-column justify-content-between align-items-center align-items-md-start">
              <div className="d-none d-md-block">
                <span className="text-uppercase small-text small-text--lighter">step 2</span>
              </div>
              <div className="d-none d-md-block">
                <h2 className="">HEADER 2</h2>
              </div>
              <div>
                <p>SOME PARAGRAPH TEXT</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
)
ReactDOM.render(
  <Main />,
  document.getElementById("react")
);

img {
  height: auto;
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

解决方案

You must disable the flexbox for larger widths because Bootstrap 4's flexbox makes columns the same height. Then, use floats so that the B & C columns naturally pull to the right, since A is taller. The flexbox order- will work to reorder the cols on mobile...

A-B-C desktop, B-A-C mobile

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

Related: Bootstrap with different order on mobile version

这篇关于一个高的 div 在桌面上与两个较短的 div 相邻，并在带有 Bootstrap 4 的移动设备上堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆