将按钮对齐到右侧

Question

将按钮对齐到右侧

我知道这一定非常简单但是我只想使用bootstrap 4类在窗口右侧设置一个按钮.它必须与文本位于同一行.

<html>
<head>
</head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <body>
        <div class="row">
            <h3 class="one">Text</h3>
            <button class="btn btn-secondary pull-right">Button</button>
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

代码就在这里

Answer 1

Ser*_*ata 68

Bootstrap 4使用.float-right而不是.pull-rightBootstrap 3.此外,不要忘记使用列正确嵌套行.

<div class="row">
    <div class="col-lg-12">
        <h3 class="one">Text</h3>
        <button class="btn btn-secondary float-right">Button</button>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Kil*_*ler 8

<div class="container-fluid">
  <div class="row">
    <h3 class="one">Text</h3>
    <button class="btn btn-secondary ml-auto">Button</button>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

.ml-auto 是Bootstraph 4的非Flexbox对齐方式.

Answer 3

小智 7

您也可以使用如下代码。

<button style="position: absolute; right: 0;">Button</button>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，9 月前
查看次数：	114686 次
最近记录：	7 年，4 月前