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）标签出现在单选按钮下方的行上; b）为什么文本不与标签内联？

谢谢

Answer 1

#myChoices p {
    display: inline-block; 
}

p标签是块元素，现在我们改为内联块，

当您使用bootstrap时，您可以使用以下类来修复包装问题

将col-xs-12类添加到#myChoices div tag

将col-xs-2类添加到所有span.outer标记

将col-xs-10类添加到p代码，如果p标记不可能在p

中包裹div代码

示例codepen

Answer 2

首先，您不能在一个页面中多次使用相同的id;所以请改用.SelectedStation类。

其次，您可以relative使用.choice定位，absolute定位.SelectedStation，并将一些左边距填充到<p>。

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap - 单选按钮的布局

2 个答案: