css - 放置广播和文本内联

Question

我想要这样的结果 Bootstrap 5 - Place Radio Buttons Inline and a Radio Input Group next to each other但是他用的是bootstrap 5，我用的是bootstrap 3.3.7所以不行。

<div class="d-flex">
    <div class="form-check form-check-inline">
    <input class='form-check-input' type='radio' />
    <label class='form-check-label'>Y</label>
    </div>
    <div class="form-check form-check-inline">
    <input class='form-check-input' type='radio' />
    <label class='form-check-label text-nowrap'>N</label>
    </div>
    <div class="input-group input-group-sm">
    <label>XXX</label><input type='text' />
    </div>
</div>

谢谢杰拉德。但是和我想的不一样。

Answer 1

您可以添加额外的 CSS 来修改对齐方式。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-1 col-xs-2">
    <input type='radio' />
    <label>Y</label>
  </div>
  <div class="col-md-1 col-xs-2">
    <input type='radio' />
    <label>N</label>
  </div>
  <div class="col-md-4">
    <label>XXX</label><input type='text' />
  </div>
</div>