css - Bootstrap - 单选按钮的布局

Question

我有一个使用 Bootstrap 3 的网页。在这个页面中，我有一些单选按钮。其中一些带有短标签。有些有更长的标签。我想格式化我的单选按钮，使它们呈现如下:

+------------------------------------------------------+
| o Choice 1                                           |
|                                                      |
| o Choice 2. This is a longer label that should       |
|   wrap. Notice how the wrap does not happen under    |
|   the radio button. Rather the text is justified     |
|                                                      |
| o Choice 3                                           |
+------------------------------------------------------+

为了尝试这样做，我决定使用 display:inline-block;，但它不起作用。我真的很想使用 inline-flex。但是，由于我的目标浏览器，我不能使用它。因此，我尝试使用纯 HTML 来模仿此功能。我在这个 Bootply 中创建了它.然而，包装行为仍然不正确。我的 HTML 看起来像这样:

<div class="container">
    <div id="myChoices">
        <label class="choice">
            <input id="SelectedStation" name="SelectedStation" type="radio" value="1">
            <span class="outer"><span class="inner"></span></span>
            <p>ABC</p>
        </label>
        <br>

        <label class="choice">
            <input id="SelectedStation" name="SelectedStation" type="radio" value="2">
            <span class="outer"><span class="inner"></span></span>
            <p>CBS</p></label>
        <br>

        <label class="choice">
            <input id="SelectedStation" name="SelectedStation" type="radio" value="3">
            <span class="outer"><span class="inner"></span></span>
            <p> This is a longer label that should wrap. Notice how the wrap does not happen under the radio button. Rather the text is justified</p>
        </label>
        <br>

        <label class="choice">
            <input id="SelectedStation" name="SelectedStation" type="radio" value="4">
            <span class="outer"><span class="inner"></span></span>
            <p>NBC</p>
        </label>
        <br>
    </div>
</div>

我做错了什么？为什么 a) 标 checkout 现在单选按钮下方的行中，b) 为什么文本换行不与标签内嵌？

谢谢

Answer 1

首先，你不能使用相同的id在一个页面中不止一次；所以使用 .SelectedStation类。

其次，您可以使用 relative定位于 .choice , absolute定位于 .SelectedStation并将一些左填充应用到您的 <p>

.choice {
  position: relative;
  display: block;
}
.SelectedStation {
  position: absolute;
  top: 0;
  left: 0;
}
.choice p {
  padding-left: 22px;
}

<div class="container">
  <div id="myChoices">
    <label class="choice">
      <input class="SelectedStation" name="SelectedStation" type="radio" value="1">
      <span class="outer"><span class="inner"></span></span>
      <p>ABC</p>
    </label>
    <br>

    <label class="choice">
      <input class="SelectedStation" name="SelectedStation" type="radio" value="2">
      <span class="outer"><span class="inner"></span></span>
      <p>CBS</p>
    </label>
    <br>

    <label class="choice">
      <input class="SelectedStation" name="SelectedStation" type="radio" value="3">
      <span class="outer"><span class="inner"></span></span>
      <p>This is a longer label that should wrap. Notice how the wrap does not happen under the radio button. Rather the text is justified</p>
    </label>
    <br>

    <label class="choice">
      <input class="SelectedStation" name="SelectedStation" type="radio" value="4">
      <span class="outer"><span class="inner"></span></span>
      <p>NBC</p>
    </label>
    <br>
  </div>
</div>