对齐引导列字段中的文本

Question

我需要使用 bootstrap 在 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>

Answer 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> 

演示版