CSS 将按钮向右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41894792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align button to the right
提问by jecabeda
I know this must be really simple but I'm trying to set a button to the right of the window using only bootstrap 4 classes. It must be in the same row as the text.
我知道这一定非常简单，但我正在尝试仅使用引导程序 4 类在窗口右侧设置一个按钮。它必须与文本在同一行。
<html>
<head>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/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>
The code is in here
代码在这里
回答by Serg Chernata
Bootstrap 4 uses .float-rightas opposed to .pull-rightin Bootstrap 3. Also, don't forget to properly nest your rows with columns.
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>
回答by Killerpixler
<div class="container-fluid">
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary ml-auto">Button</button>
</div>
</div>
.ml-autois Bootstraph 4's non-flexbox way of aligning things.
.ml-auto是 Bootstrap 4 的非 flexbox 对齐方式。
回答by Ankr
You can also use like below code.
您也可以使用如下代码。
<button style="position: absolute; right: 0;">Button</button>
回答by josemmo
If you don't want to use float, the easiest and cleanest way to do it is by using an auto width column:
如果您不想使用浮动，最简单和最干净的方法是使用自动宽度列：
<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>
回答by Tariq SADDEK
try to put your script and link on the head like this:
尝试将您的脚本和链接放在头上，如下所示：
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/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>
回答by Alex
Maybe you can use float:right;:
也许你可以使用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>回答by Roylyan Nikita
The bootstrap 4.0.0 file you are getting from cdn doesn't have a pull-right (or pull-left) class. The v4 is in alpha, so there are many issues like that.
您从 cdn 获得的引导程序 4.0.0 文件没有右拉（或左拉）类。v4 处于 alpha 阶段，所以有很多类似的问题。
There are 2 options:
有2个选项：
1) Reverse to bootstrap 3.3.7
1) 反向引导 3.3.7
2) Write your own CSS.
2）编写自己的CSS。
