向右对齐按钮答案

【问题标题】：Align button to the right向右对齐按钮
【发布时间】：2017-06-13 04:24:07
【问题描述】：

我知道这一定很简单，但我正在尝试仅使用 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>

代码在here

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

也许你可以使用 float:right;:

.one {
  padding-left: 1em;
  text-color: white;
   display:inline; 
}
.two {
  background-color: #00ffff;
}
.pull-right{
  float:right;
}

<html>
<head>
 
  </head>
  <body>
      <div class="row">
       <h3 class="one">Text</h3>
       <button class="btn btn-secondary pull-right">Button</button>
    </div>
  </body>
</html>

【讨论】：

浮动：右；这就是我需要的XD

【解决方案2】：

Bootstrap 4 uses .float-right 与 Bootstrap 3 中的 .pull-right 不同。另外，不要忘记将行与列正确嵌套。

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

【讨论】：

任何人都可能做错的事情是将它们放置在没有正确放置在行和列中。这个很好用。

【解决方案3】：

您从 cdn 获得的 bootstrap 4.0.0 文件没有 pull-right（或 pull-left）类。 v4 处于 alpha 阶段，所以有很多类似的问题。

有两种选择：

1) 逆向引导 3.3.7

2) 编写自己的 CSS。

【讨论】：

判断太快了。 Bootstrap 4 有一个 float-right (float-left) 类而不是 pull-right (pull-left)。对不起。

【解决方案4】：

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

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

【讨论】：

在 Bootstrap 4 中将 ml-auto 添加到按钮类对我有用，而其他许多事情都没有（在按钮类、导航类和 ul 类中尝试了各种方法）
“对于 Bootstrap-5，我们必须使用 ms-auto 而不是 ml-auto”，来源：stackoverflow.com/a/65562241/1956540

【解决方案5】：

如果您不想使用浮动，最简单和最干净的方法是使用自动宽度列：

<div class="row">
  <div class="col">
    <h3 class="one">Text</h3>
  </div>
  <div class="col-auto">
    <button class="btn btn-secondary pull-right">Button</button>
  </div>
</div>

【讨论】：

【解决方案6】：

您也可以使用如下代码。

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

【讨论】：

【解决方案7】：

试着像这样把你的脚本和链接放在头上：

<html>
  <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>
  </head>
  <body>
     <div class="row">
        <h3 class="one">Text</h3>
        <button class="btn btn-secondary pull-right">Button</button>
     </div>
  </body>
</html>

【讨论】：

【解决方案8】：

在我的情况下，我需要将两个或更多按钮向右对齐，经过几次尝试后，这对我有用：

 <div class="float-right">
    <button type="button" class="btn btn-primary">First Button</button>
    <button type="button" class="btn btn-secondary">Second Button</button>
 </div>

【讨论】：