DEMO

Question

我需要使用bootstrap在html中显示名称值对。我正在使用课程＆＃34; col-md-1＆＃34;对于名称和值列，因此数据显示在两列中。问题是，当bootstrap将屏幕划分为12列时，它会在字段值的内容左侧和右侧留下很多空间。我尝试使用类＆＃34; text-left＆＃34;，＆＃34; text-right＆＃34;但它似乎并没有与＆＃34; col-md- ＆＃34;类。如何在bootstap列中向左或向右对齐文本（例如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'类，它将避免填充

 <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

Answer 2

希望这个帮助您可以像使用

一样使用它

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

For Detail查看以下链接 Jsfiddle

欢迎任何更加深刻的问题

由于 ROHIT

Answer 3

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

<div class="row text-center">

在bootstrap col字段中对齐文本

3 个答案:

DEMO