如何正确地将左侧的文本对齐到一行的列中？答案

【问题标题】：How can correctly align the text on the left into the column of a row?如何正确地将左侧的文本对齐到一行的列中？
【发布时间】：2015-08-25 10:45:14
【问题描述】：

我是 Twitter BootStrap 的新手，我正在疯狂地尝试做与这个 JSFiddle 示例相关的以下事情：https://jsfiddle.net/AndreaNobili/DTcHh/11406/

所以，在前面的例子中，我有这一行：

<div class="col-md-4">
    <div class="row">
        <div class="col-md-10" style="text-align: right !important;">
            <p>TEST</p>
        </div>

       <div class="col-md-2">
           <i class="glyphicon glyphicon-home"></i>
       </div>

    </div>
</div>

所以我正确地获得了包含 2 列的行：左侧最大的一列用于文本，右侧较小的一列用于图标。

正如您在 JSFiddle 中看到的那样，问题是我想在右侧对齐文本，所以我会让它靠近图标但我做不到。

如你所见，我完成了：

<div class="col-md-10" style="text-align: right !important;">

但我仍然知道文本位于其容器的左侧。

为什么？我错过了什么？如何解决此问题并在我的图标附近对齐右侧的文本？

【问题讨论】：

尝试右对齐时，您使用的是.container p {text-align: justify !important;} ??在bootstrap 中，我们的类名称为text-center、text-right，反之亦然，用于文本对齐。

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

这就是为什么使用 !important 被认为是一种不好的做法，除非它非常重要，否则应避免使用。你的定义

.container p { text-align: justify !important; }

在 index.css 中优先于所有样式。我建议从上述定义中删除重要的部分，并使其更精确地根据需要仅应用于某些 dom 元素（通过使用适当的类）。

关于向右对齐，其他答案应该可以正常工作；即使用 Bootstrap 提供的text-right 类。

【讨论】：

请在容器前加点号

【解决方案2】：

 <div class="col-md-4">
    <div class="row">
        <div class="col-md-10" style="text-align: right !important;padding-right: 0">
            <p>TEST</p>
        </div>

        <div class="col-md-2" style="padding-left: 0">
           <i class="glyphicon glyphicon-home"></i>
       </div>

    </div>
</div>

【讨论】：

【解决方案3】：

只需使用 Bootstrap 的text-right..

<div class="col-md-4">
       <div class="row">
                    <!-- CONTENT: -->
                    <div class="col-md-10 text-right">
                        TEST
                    </div>
                    <!-- ICONA: -->
                    <div class="col-md-2">
                        <i class="glyphicon glyphicon-home"></i>
                    </div>
       </div>
</div>

http://codeply.com/go/ICgJMj82ue

【讨论】：

【解决方案4】：

首先我想说的是你需要改进的使用元素的序列如何使用它们这可以很容易解决你的问题，让代码变得非常漂亮，这样人们就可以工作了当你需要回来重用时，你会喜欢的

下面是我的尝试

这就是为什么使用 !important 被认为是一种不好的做法，除非它非常重要，否则应避免使用。

test{
    float:left;    
}
.test1{
    line-height:30px;
}

<!-- Column 3:  -->
				<div class="col-md-4">
				
					<div class="row">
                        <!-- ICONA: -->
						<div class="col-md-2 test">
							<i class="glyphicon glyphicon-home"></i>
						</div>
						<!-- CONTENT: -->
						<div class="col-md-10 test1">
							<p>TEST</p>
						</div>						
						
					</div>
	
					 
		                
				</div>

DEMO

【讨论】：

【解决方案5】：

    <div class="col-md-10" style="text-align: right !important;">
        <p class="text-right">TEST</p>
    </div>

   <div class="col-md-2">
       <i class="glyphicon glyphicon-home"></i>
   </div>

</div>

【讨论】：

您可以通过添加简短说明来改进您的答案。
这行不通，因为 !important 定义总是优先

【解决方案6】：

如果您想并排显示两个元素，则不需要在您的情况下使用 Bootstrap 的列（col-md-x、col-sm-x、col-lg-x）。

由于 JSfiddle 中的屏幕部分在 HTML 右侧非常小，因此您的列 (col-md-xs) 将获得更大的宽度（由于 Twitter Bootstrap 的 @media 查询） . 因此，这两列将彼此堆叠。

您可以通过使用两个通常显示为inline 的 HTML 元素以与您已有的非常相似的方式对齐图标右侧的文本：

   <div class="row">
       <!-- ICONA: -->
           <div class="col-md-10">
               <i class="glyphicon glyphicon-home"></i>
               <span>HOME</span> 
           </div>
   </div>

JSFiddle

【讨论】：