Bootstrap 按钮在右上角

Question

我有 bootstrap 个这样的页面

  <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 但是没用。

Answer 1

这是针对您的问题的纯 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>

Answer 2

您可以根据需要更改结构，按钮和第 1 列位于同一行，第 2、3 列位于同一行，如下所示。

<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-2 col-md-2 col-lg-offset-8 col-lg-1'>
        <button type="button">Button</button>
    </div>
</div>
<div class='row'>
    <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>

Answer 3

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Your title here</title>
  </head>
<div class="row">
<div class="col-sm-12">
<a href="#" class="float-right btn btn-primary">**Button**</a>
</div>
</div>
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap 按钮在右上角

Bootstrap button on right top

html

css

bootstrap-4

ng-bootstrap