[英]Align div right in Bootstrap 3
Bootstrap 3 中有没有办法右对齐 div?
我知道偏移的可能性,但我想将格式化的 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 我知道如何在 CSS 中执行此操作,但是可以在纯引导程序 3 中完成吗?
类 pull-right 仍然存在于 Bootstrap 3 中,请参阅此处的“帮助类”
右拉定义为
.pull-right {
float: right !important;
}
没有更多关于样式和内容的信息,很难说。
当页面宽度超过 990像素时,它肯定会在这个JSBIN 中正确拉动 - 这是 col-md 样式开始的时候,Bootstrap 3 首先是移动的。
引导程序 4
请注意,对于 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 。
你的意思是这样的:
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
.yellow-background {
background: blue;
}
.pull-right {
background: yellow;
}
可以在Codepen上找到完整的示例。
我认为您尝试将 div 中的内容向右对齐,具有偏移量的 div 已经将自身向右推,这里有一些代码和LIVE 示例:
仅供参考: .pull-right
仅将 div .pull-right
推,而不是 div 内的内容。
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:
.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;
}
另一个修改:
...
<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>
...
希望它能解决你的问题
Bootstrap 4+为此对实用程序类进行了更改。 从文档:
为响应式浮动添加了
.float-{sm,md,lg,xl}-{left,right,none}
类并删除了.pull-left
和.pull-right
因为它们对于.float-left
和.float-right
是多余的.float-right
。
因此,如果您使用较新的 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.