twitter-bootstrap 对齐引导列字段中的文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25719115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:29:31  来源:igfitidea点击:

Align text in bootstrap col fields

twitter-bootstraptextalignment

提问by Mothupally

I have a requirement of displaying name value pairs in html using bootstrap. I am using the class "col-md-1" for name and value columns and so the data is displayed in two columns. The problem is that as bootstrap divides the screen in 12 columns, it leaves much space to the left and right of the content in field values. I tried using the classes "text-left","text-right" but it doesn't seem to work in conjunction with "col-md-" classes. How can one align text to left or right in bootstap columns (say col-md-) without hardcoding left or right in style to certain pixels?

我需要使用引导程序在 html 中显示名称值对。我将类“col-md-1”用于名称和值列,因此数据显示在两列中。问题是,当 bootstrap 将屏幕分成 12 列时,它在字段值的内容的左侧和右侧留下了很多空间。我尝试使用“text-left”、“text-right”类,但它似乎不能与“col-md- ”类结合使用如何在 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>

回答by Suganth G

Try this:

试试这个:

Use 'row'class , it will avoid padding

使用'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

演示

回答by Rohit

Hope this Help You can use it like following

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

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

For Detail have a look at following link Jsfiddle

有关详细信息,请查看以下链接 Jsfiddle

Any furthur questions are welcomed

欢迎任何进一步的问题

Thanks ROHIT

谢谢罗希特

回答by Skander Jenhani

This code works also to center content of columns in a bootstrap row :

此代码还可用于将引导行中的列内容居中:

<div class="row text-center">