引导:列中的文本-需要对它们进行排列
我想做以下几点：
我使用以下代码实现了这一点：
<div class="form-group">
<label for="x" class="col-sm-2 control-label">TEXT</label>
<div id="xDiv" class="col-sm-10">
<div class="radio">Test 1</div>
<div class="radio">Test 2</div>
<div class="radio">Test 3</div>
</div>
</div>但是如果没有无线电盒的话，使用无线电类感觉就像一次黑客攻击。
本质上，我只想让“文本”与第一行“测试1”、“测试2”和“测试3”直接排列在一起。
任何想法都欢迎。
谢谢
回答 1
Stack Overflow用户
发布于 2014-08-20 09:15:21
你说得对，这是个小问题，你用一些为表单设计的东西来显示你想要的东西。感谢你想找到更好的解决方案！
有很多方法可以做到这一点，这取决于您的文本所显示的上下文。
网格系统
第一种方法是使用自举网格系统将内容放置在两个不同的列中。这些将自动排列，您甚至可以使列的宽度不同(或使它们在小屏幕上扩展到100%的宽度)。
<div class="container">
<h2>Using Grid System</h2>
<div class="row">
<div class="col-md-2"><p>TEXT</p></div>
<div class="col-md-6"><p>Test 1<br/>Test 2<br/>Test 3</p></div>
</div>
</div>它的缺点是，它不是特别的语义，屏幕阅读器可能没有按你所期望的顺序阅读。
表格
备选方案2是使用好的老式表。如果您的数据适合表，那么就使用它们吧！您也不必使用类中内置的引导程序，因此您可以根据自己的需要对其进行样式设计。
<div class="container">
<h2>Using Tables</h2>
<div class="row">
<div class="col-md-4">
<table class="table">
<tr>
<td>TEXT</td>
<td>Test 1<br/>Test 2<br/>Test 3</td>
</tr>
</table>
</div>
</div>
</div>这样做的缺点是，如果您的数据不适合一个表，您就不应该真正使用一个表，因为它基本上与您最初所做的一样，滥用一个html元素只是为了使它具有您想要的样式。
描述列表
我现在能想到的最后一个选项是使用<dl>标记。这是一个描述列表和根据MDN；
HTML元素(或HTML描述列表元素)包含一对术语和描述的列表。此元素的常见用途是实现术语表或显示元数据(键值对列表)。
用这些你就能做到
<h2>Using Description Lists</h2>
<dl class="dl-horizontal">
<dt>Text</dt>
<dd>Test 1</dd>
<dd>Test 2</dd>
<dd>Test 3</dd>
</dl>在本例中，我们使用的是“单术语、多描述”方法。这假设测试1、2和3以及“文本”一词的不同描述。同样，只有当您真正试图显示一个描述列表时，使用这个元素才有意义，就像表应该只显示表格数据一样。
我确信还有许多其他的可能性，有些可能更简单，但这三种可能性在引导框架中非常适合，并且可能使您的代码更具有语义性，这总是很好的。
https://stackoverflow.com/questions/25399100
复制相似问题
腾讯云开发者
