Html 将文本与 Bootstrap 4 对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48616400/
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 text right in-line with Bootstrap 4
提问by Root Haxx
I'm currently using bootstrap 4. I'm trying to align text right on my card header, I tried using ml-autobut it didn't work. What could be the solution?
我目前正在使用 bootstrap 4。我试图在我的卡片标题上对齐文本，我尝试使用ml-auto但它没有用。解决办法是什么？
Here's my card header code:
这是我的卡头代码：
<div class="card-header bg-info text-white">
<a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
<a href="#" class="text-white ml-auto">Add Media</a>
</div>
回答by WebDevBooster
In order for the ml-autoclass to work you just need to add the d-flexclass (display:flex) to the parent element like so:
为了使ml-auto类工作，您只需要将d-flex类 (display:flex) 添加到父元素，如下所示：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card-header bg-info text-white d-flex">
<a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
<a href="#" class="text-white ml-auto">Add Media</a>
</div>回答by dstrants
It depends on the version of Bootstrap you are using
这取决于您使用的 Bootstrap 版本
Bootstrap 3
引导程序 3
use the class text-right
使用类 text-right
Bootstrap 4
引导程序 4
In newest version, you can use the class text-lg-rightusing the viewport size you prefer of course
在最新版本中，您当然可以使用text-lg-right您喜欢的视口大小来使用该类
Additionals
附加费
You check more in this questionor check the official documentation v4
回答by Dustbin Saves you
I don't use Bootstrap, I use the Materialize but you could add normal styling to it,
on your
我不使用 Bootstrap，我使用 Materialize 但你可以
在你的
<a href="#" class="text-white" style="text-align: right;"><i class="fa-th"></i> Media Library</a>
This would align only you anchor tag to the right
这只会将您的锚标记向右对齐
回答by Sarvan Kumar
Use this class text-right..
使用这个类text-right..
<div class="card-header bg-info text-white text-right">
<a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
</div>
回答by vidarshana
Use this cord...
用这条线...
<div class="card-header bg-info text-white" style="text-align:right">
<a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
</div>
