Html 在 Bootstrap 3 中右对齐 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19758313/
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 div right in Bootstrap 3
提问by Klaaz
Is there a way in Bootstrap 3 to right align a div?
Bootstrap 3 中有没有办法右对齐 div？
I am aware of the offsetting possibilitys but I want to align a formatted div to the right of its container while it should be centered in a fullwidth mobile view. The class 'pull-right' is not working anymore. Did they forgot to replace it or am I missing something obvious?
我知道偏移的可能性，但我想将格式化的 div 与其容器的右侧对齐，同时它应该在全宽移动视图中居中。'pull-right' 类不再起作用。他们忘记更换它还是我遗漏了一些明显的东西？
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<!-- The next div has a background color and its own paddings and should be aligned right-->
<!-- It is now in the right column but aligned left in that column -->
<div class="yellow_background">right content</div>
</div>
</div>
</div>
Shure I know how to do this in CSS, but can it be done in pure bootstrap 3?
Shure 我知道如何在 CSS 中执行此操作，但是可以在纯引导程序 3 中完成吗？
回答by JasonB
The class pull-right is still there in Bootstrap 3 See the 'helper classes' here
类 pull-right 仍然存在于 Bootstrap 3 中，请参阅此处的“帮助类”
pull-right is defined by
右拉定义为
.pull-right {
float: right !important;
}
without more info on styles and content, it's difficult to say.
没有更多关于样式和内容的信息，很难说。
It definitely pulls right in this JSBINwhen the page is wider than 990px - which is when the col-md styling kicks in, Bootstrap 3 being mobile first and all.
当页面宽度超过 990像素时，它肯定会在这个JSBIN 中正确拉动 - 这是 col-md 样式开始的时候，Bootstrap 3 首先是移动的。
回答by Eric Geurts
Do you mean something like this:
你的意思是这样的：
HTML
HTML
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<div class="yellow-background">
text
<div class="pull-right">right content</div>
</div>
</div>
</div>
</div>
CSS
CSS
.yellow-background {
background: blue;
}
.pull-right {
background: yellow;
}
A full example can be found on Codepen.
可以在Codepen上找到完整的示例。
回答by xnome
i think you try to align the content to the right within the div, the div with offset already push itself to the right, here some code and LIVE sample:
FYI: .pull-rightonly push the div to the right, but not the content inside the div.
我认为您尝试将 div 中的内容向右对齐，具有偏移量的 div 已经将自身向右推，这里有一些代码和实时示例：
仅供参考：.pull-right仅将 div 向右推，而不是将 div 内的内容.
HTML:
HTML：
<div class="row">
<div class="container">
<div class="col-md-4 someclass">
left content
</div>
<div class="col-md-4 col-md-offset-4 someclass">
<div class="yellow_background totheright">right content</div>
</div>
</div>
</div>
CSS:
CSS：
.someclass{ /*this class for testing purpose only*/
border:1px solid blue;
line-height:2em;
}
.totheright{ /*this will align the text to the right*/
text-align:right;
}
.yellow_background{
background-color:yellow;
}
Another modification:
另一个修改：
...
<div class="yellow_background totheright">
<span>right content</span>
<br/>image also align-right<br/>
<img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...
hope it will clear your problem
希望它能解决你的问题
回答by Voicu
Bootstrap 4+has made changes to the utility classes for this. From the documentation:
Bootstrap 4+为此对实用程序类进行了更改。从文档：
Added
.float-{sm,md,lg,xl}-{left,right,none}classes for responsive floats and removed.pull-leftand.pull-rightsince they're redundant to.float-leftand.float-right.
.float-{sm,md,lg,xl}-{left,right,none}为响应式浮动添加了类并删除了.pull-left，.pull-right因为它们对于.float-left和 来说是多余的.float-right。
So use the .float-right(or a size equivalent such as .float-lg-right) instead of .pull-rightfor your right alignment if you're using a newer Bootstrap version.
因此，如果您使用的是较新的 Bootstrap 版本，请使用.float-right（或等效的大小，例如.float-lg-right）而不是.pull-right正确对齐。
回答by preeti
Add offset8to your class, for example:
添加offset8到您的班级，例如：
<div class="offset8">aligns to the right</div>
