Bootstrap：列中的文本 - 需要排列它们

Question

我想做以下事情：

我使用以下代码实现了这一目标：

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

但鉴于没有收音机盒，感觉就像是使用收音机类的黑客。

基本上，我只是希望“TEXT”与第一行“Test 1”对齐，“Test 2”和“Test 3”直接出现在它下面。

欢迎任何想法。

由于

Answer 1

你是对的，这有点像黑客，你正在使用为表单设计的东西来制作出你想要的东西。感谢您希望找到更好的解决方案！

根据文本显示的内容，您可以通过多种方式执行此操作。

网格系统

第一种方法是使用Bootstraps Grid System将您的内容放在两个不同的列中。这些将自动排列，您甚至可以使列的宽度不同（或在小屏幕上扩展到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是使用好的老式表格。如果您的数据适合表格，那么使用它们！您也不必使用内置类的Bootstraps，因此您可以根据需要设置样式。

<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>标记。这是一个描述列表和according to 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以及术语“文本”的不同描述。同样，使用此元素只有在您真正尝试显示描述列表时才有意义，就像表格应该只显示表格数据一样。

我确信还有很多其他的可能性，有些可能更简单，但是这些是在Bootstrap框架中很好地适应的三个，可能会使你的代码更加语义化，这总是很好。