[英]Align div right in Bootstrap 3
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.我知道偏移的可能性,但我想将格式化的 div 与其容器的右侧对齐,同时它应该在全宽移动视图中居中。 The class 'pull-right' is not working anymore. 'pull-right' 类不再起作用。 Did they forgot to replace it or am I missing something obvious?他们忘记更换它还是我遗漏了一些明显的东西?
<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 中完成吗?
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 JSBIN when 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 首先是移动的。
Bootstrap 4引导程序 4
Note that for Bootstrap 4 .pull-right has been replaced with .float-right https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/#:~:text=pull%2Dright%20classes%20have%20been,based%20on%20the%20Bootstrap%20Grid .请注意,对于 Bootstrap 4 .pull-right 已替换为 .float-right https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/#:~:text =pull%2Dright%20classes%20have%20been,based%20on%20the%20Bootstrap%20Grid 。
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;
}
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 :我认为您尝试将 div 中的内容向右对齐,具有偏移量的 div 已经将自身向右推,这里有一些代码和LIVE 示例:
FYI: .pull-right
only push the div to the right, but not the content inside the div.仅供参考: .pull-right
仅将 div .pull-right
推,而不是 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希望它能解决你的问题
Bootstrap 4+ has made changes to the utility classes for this. Bootstrap 4+为此对实用程序类进行了更改。 From the documentation :从文档:
Added
.float-{sm,md,lg,xl}-{left,right,none}
classes for responsive floats and removed.pull-left
and.pull-right
since they're redundant to.float-left
and.float-right
.为响应式浮动添加了.float-{sm,md,lg,xl}-{left,right,none}
类并删除了.pull-left
和.pull-right
因为它们对于.float-left
和.float-right
是多余的.float-right
。
So use the .float-right
(or a size equivalent such as .float-lg-right
) instead of .pull-right
for your right alignment if you're using a newer Bootstrap version.因此,如果您使用较新的 Bootstrap 版本,请使用.float-right
(或等效的大小,例如.float-lg-right
)而不是.pull-right
进行右对齐。
将offset8
添加到您的类中,例如:
<div class="offset8">aligns to the right</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.