Html 如何使用 twitter bootstrap 正确对齐元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15422134/
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
How do I right align an element using twitter bootstrap?
提问by sharataka
I have 3 elements and I am trying to align the button to the right side of the screen, but am having trouble doing so.
我有 3 个元素，我试图将按钮与屏幕右侧对齐，但这样做时遇到了问题。
<div class="container">
<div class="row-fluid">
<h4>
<img src="img.png" style="width:50px;">
Title
<a href="link_to_img.html" class="btn btn-success">Grab it!</a>
</h4>
</div>
</div>
回答by Stefan
Try the class 'pull-right'.
试试“拉右”类。
<div class="pull-right">...</div>
回答by trajce
try something like this
尝试这样的事情
<a href = "link_to_img.html" class = 'btn btn-success pull-right'>Grab it!</a>
回答by Javier
Utilise justify-content-end
使用justify-content-end
From the bootstrap documentation, it says:
从引导程序文档中，它说：
Bootstrap 3 used .navbar-left and .navbar-right for navbar alignment.
Bootstrap 3 使用 .navbar-left 和 .navbar-right 来对齐导航栏。
Bootstrap 4 uses the various helper classes.
Bootstrap 4 使用各种辅助类。
(Alignment part) https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_navbars.cfm
（对齐部分） https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_navbars.cfm
and here more info about the new alignment https://www.quackit.com/css/flexbox/tutorial/flexbox_alignment.cfm
以及有关新对齐方式的更多信息 https://www.quackit.com/css/flexbox/tutorial/flexbox_alignment.cfm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<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>
<style>
.wrapper {
display: flex;
align-items: center;
background-color: beige;
height: 100vh;
}
.wrapper > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
body {
margin: 0;
}
</style>
<div class="wrapper justify-content-end">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
</body>
</html>
