logo标签列表

将按钮对齐到右侧

cssbootstrap-4
59

我知道这可能非常简单，但我正在尝试只使用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>

代码在这里

9个回答
131
任何人可能犯的错误是将它们放置在行和列中不正确的位置。这个很好地解决了。 - Sohan Arafat
18
<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是Bootstrap 4中非flexbox的对齐方式。

1
在Bootstrap 4中，将ml-auto添加到按钮类对我很有效，而其他许多尝试（在按钮类、导航类和ul类中尝试各种方法）则没有起作用。 - James
对于Bootstrap-5，我们必须使用ms-auto而不是ml-auto。 - BatteryAcid
7
您还可以使用以下代码。
<button style="position: absolute; right: 0;">Button</button>
2

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

<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>
2

在我的情况下，我需要将两个或多个按钮向右对齐，在尝试了几次后，以下方法适用于我：

 <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>
0

试着像这样将您的脚本和链接放在页头：

<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>
-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>

float:right; 这就是我需要的 XD - andres martinez
-1
<v-btn class="float-right">  Download</v-btn>
请阅读“[答案]”。如果您能提供为什么这是首选解决方案以及解释其工作原理的说明，那将更有帮助。我们想要教育，而不仅仅提供代码。 - the Tin Man
-4

你从CDN获取的Bootstrap 4.0.0文件中没有pull-right（或pull-left）类。由于v4处于alpha版本，因此存在许多类似的问题。

有两个选项：

1）回退到Bootstrap 3.3.7

2）编写自己的CSS。

判断过于草率了。Bootstrap 4使用float-right（float-left）类，而不是pull-right（pull-left）类。抱歉。 - Roylyan Nikita
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接