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
Align text in bootstrap col fields
提问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
回答by Rohit
回答by Skander Jenhani
This code works also to center content of columns in a bootstrap row :
此代码还可用于将引导行中的列内容居中:
<div class="row text-center">

