Bootstrap 4将文本右对齐[重复]答案

【问题标题】：Bootstrap 4 align text right [duplicate]Bootstrap 4将文本右对齐[重复]
【发布时间】：2020-06-09 02:50:03
【问题描述】：

我使用的是原始引导 CSS，但使用此代码，我的文本不会左右对齐。它们只是彼此相邻。

.text-left {
    text-align: left!important
}
.text-right {
    text-align: right!important
}

<div class="cart_row">
    <span class="text-left">Price</span> 
    <span class="text-right"><?php echo int_to_format($price); ?> Ft,-</span>
</div>

我做错了什么？

【问题讨论】：

是的，我用 flex 做到了。我怎样才能关闭这个帖子？
您不关闭帖子。您接受解决您问题的答案。如果您在其他人之前找到了解决方案，您可以发布自己的答案，以便其他偶然发现问题的人知道正确的解决方案。
a span 是一个内联元素，因此文本对齐将无法在其上工作（因为该元素是文本的大小，除非它换行）相反，您想让您的元素阻塞并占用每个 50% 的宽度（应用这些类）或者只是让父级 flex 与 justify 之间的内容空间

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以通过使用它的 flex 类来使用它。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="cart_row d-flex justify-content-between">
    <span class="text-left">Price</span> 
    <span class="text-right"><?php echo int_to_format($price); ?> Ft,-</span>
</div>

【讨论】：

【解决方案2】：

span 是内联元素。

使用类float-right。

<div class="cart_row">
  <span>Price</span>
  <span class="float-right"><?php echo int_to_format($price); ?> Ft,-</span>
</div>

在此处查看实时代码：https://codepen.io/manaskhandelwal1/pen/GRJrebW

【讨论】：

【解决方案3】：

您需要了解 css-bootstrap（具有行和宽度的网格系统）的要点

.pull-left 类用于将元素向左浮动 .pull-right 类用于将元素向右浮动

创建一个给定宽度的行，然后创建 2 个内部部分，它们之间的宽度分开。

来源：Quick floats

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<!DOCTYPE html> 
<html> 

<head> 

	<!-- Include Bootstrap CSS -->
	<link rel="stylesheet"
		href= 
"https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
</head> 

<body> 
<div class="row col-md-12">
 <div class="col-md-3">
    <span class="pull-left bg-success">left test1</span> 
    <span class="pull-right bg-warning">right test1</span>
 </div> 
 <div class="col-md-3">
    <span class="pull-left bg-info">left test2</span> 
    <span class="pull-right bg-danger">right test3</span>
 </div>
 
</div>
</body> 

</html>

【讨论】：