Question

在Bootstrap 3中，我希望它们旁边有垂直按钮。但是，当我在标记之后放置任何文本时，它将它放在一个新行上。知道我怎么能把它保持在同一条线上。谢谢！

<div *ngFor="let d of data; let rowId= index | async">

Answer 1

使用form-group。这就是全部！并隐藏radio使用此：

.form-group input[type="radio"] {
    -webkit-appearance: none;
}

＆＃13;

.form-group input[type="radio"] {
    -webkit-appearance: none;
}

.form-group label {
    width: 70%;
    float: left;
}

.form-group span {
    width: 30%;
    float: right;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row text-center">
  <form action="" method="POST" class="form-horizontal">
    <div class="btn-group-vertical" data-toggle="buttons">

      <div class="form-group">
        <label class="btn btn-default">
            <input type="radio" value="0">Option A
            </label>
        <span>Some text</span>
      </div>

      <div class="form-group">
        <label class="btn btn-default">
            <input type="radio" value="1">Option B
            </label>
        <span>Some text</span>
      </div>
      
       <div class="form-group">
        <label class="btn btn-default">
            <input type="radio" value="2">None of above
            </label>
        <span>Some text</span>
      </div>

    </div>
  </form>
</div>

＆＃13;

Answer 2

如果您想创建内联单选按钮，可以尝试这样的方法：

<div class="container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 3
    </label>
  </form>
</div>

这将显示彼此相邻的所有文本和单选按钮。班级.radio-inline会将文字放在单选按钮旁边。

如果您想要新行上的每个单选按钮，只需修改此代码并在每个div和按钮周围加label即可。给div一个可能.col-xs-12的类，这样它占用了100％的空间，这将导致你的新单选按钮在新页面上开始。

垂直对齐按钮旁边的文本Bootstrap 3

2 个答案: