时间戳

首页 > 解决方案 > 右上角的引导按钮

html - 右上角的引导按钮

问题描述

我有这样的引导页面

  <div class='container'>
    <div class='row'>
      <div class='col-sm-6 col-md-4 col-lg-3'>
        <p>column1</p>
      </div>
      <div class='col-sm-6 col-md-4 col-lg-3'>
        <p>column2</p>
      </div>
      <div class='col-sm-6 col-md-6 col-lg-4'>
        <p>column3</p>
      </div>
      <div class='col-sm-2 col-md-2 col-lg-1'>
        <button type="button">Button</button>
      </div>
    </div>
  </div>

pc的时候是这样的

1 row
--------------------------------
|column1|column2|column3|button|
--------------------------------

但是我想在Ipad横向显示模式（1024px）的时候改成这样

2 rows
--------------------------------
|column1|               |button|
--------------------------------
|column2|column3|
--------------------------------

这可能吗？我尝试使用 pull-right、text-right、justify-content-end 但它不起作用。

标签： htmlcssbootstrap-4ng-bootstrap

解决方案

这是针对您的问题的纯引导解决方案，只需使用现有的类即可，我为演示目的提供了 BG 颜色，您可以将其删除。享受，

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <div class='container'>
        <div class='row'>
            <div class='col-xl-4 col-6' style="background-color: red">
                <p>column1</p>
            </div>
            
            <div class='col-xl-1 col-6 order-xl-3 text-right text-xl-left' style="background-color: yellow">
                <button type="button">Button</button>
            </div>
            <div class='col-xl-7 order-xl-2' style="background-color: green">
                <div class="row">
                    <div class='col-6'>
                        <p>column2</p>
                    </div>
                    <div class='col-6'>
                        <p>column3</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

推荐阅读