对齐引导列字段中的文本

Posted 2023-03-05

【中文标题】对齐引导列字段中的文本

【英文标题】：Align text in bootstrap col fields

【发布时间】：2014-11-01 08:51:34

【问题描述】：

我需要使用引导程序在 html 中显示名称值对。我将“col-md-1”类用于名称和值列，因此数据显示在两列中。问题在于，由于 bootstrap 将屏幕分为 12 列，因此在字段值内容的左侧和右侧留下了很多空间。我尝试使用“text-left”、“text-right”类，但它似乎不能与“col-md-”类一起使用。如何在引导列（例如 col-md-）中将文本左对齐或右对齐，而不将样式左或右硬编码为某些像素？

   <div class="row">
      <div class="col-md-1">column1</div>
      <div class="col-md-1"><p class="text-right">Name</p></div>
      <div class="col-md-1"><p class="text-left">Value</p></div>
      <div class="col-md-1">column4</div>
      <div class="col-md-1">column5</div>
      <div class="col-md-1">column6</div>
      <div class="col-md-1">column7</div>
      <div class="col-md-1">column8</div>
      <div class="col-md-1">column9</div>
      <div class="col-md-1">column10</div>
      <div class="col-md-1">column11</div>
      <div class="col-md-1">column12</div>
  </div>

【参考方案1】：

试试这个：

使用'row' class ，它将避免填充

 <div class="col-md-1"><p class="row text-right">Name</p></div>
 <div class="col-md-1"><p class="row text-left">Value</p></div> 

DEMO

【参考方案2】：

希望得到帮助 你可以像下面这样使用它

<div class="col-md-1 text-center">

详情请看以下链接 Jsfiddle

欢迎任何进一步的问题

谢谢 罗希特

【讨论】：

它似乎不起作用。尝试在浏览器中打开你的 html，而不是 jsfiddle。

你能把你的代码上传到fiddle吗？我想研究一下……其实很担心对引导库的引用。

【参考方案3】：

此代码还可以将引导行中的列内容居中：

<div class="row text-center">