Question

我是Bootstrap的新手，如果这听起来太基础了，请抱歉。

我需要创建一个ListGroup。

列表中的每个项目都应包含：

文本；
几个无线电输入（水平内联）；
一个按钮；

文本，单选按钮和按钮之间的间距应使文本占据可用空间的80％，单选按钮/按钮各占10％。

这可能吗？怎么样？

Answer 1

我刚刚使用Bootstrap 4中最常用的类为您创建了一个线性网格。你怎么看？我已将链接附加到下面的CodePen，因此您可以立即开始使用它。

HTML

<div class="main-wrapper">
  <div class="container main-container">
    <div class="row main-row">
      <div class="col-12 align-center">
        <div class="row p-3">
          <div class="col-4 align-middle">
            This is a sample text
          </div>
          <div class="col-6">
            <div class="form-check-inline">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
            </div>
            <div class="form-check-inline">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
            </div>
            <div class="form-check-inline disabled">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
            </div>
          </div>
          <div class="col-2">
            <button type="button" class="btn btn-primary btn-block">Button</button>
          </div>
        </div>
      </div>
    </div>
    <div class="row main-row">
      <div class="col-12 align-center">
        <div class="row p-3">
          <div class="col-4 align-middle">
            This is a sample text
          </div>
          <div class="col-6">
            <div class="form-check-inline">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
            </div>
            <div class="form-check-inline">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
            </div>
            <div class="form-check-inline disabled">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
            </div>
          </div>
          <div class="col-2">
            <button type="button" class="btn btn-info btn-block">Button</button>
          </div>
        </div>
      </div>
    </div>
    <div class="row main-row">
      <div class="col-12 align-center">
        <div class="row p-3">
          <div class="col-4 align-middle">
            This is a sample text
          </div>
          <div class="col-6">
            <div class="form-check-inline">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
            </div>
            <div class="form-check-inline">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
            </div>
            <div class="form-check-inline disabled">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
            </div>
          </div>
          <div class="col-2">
            <button type="button" class="btn btn-danger btn-block">Button</button>
          </div>
        </div>
      </div>
    </div>
    <div class="row main-row">
      <div class="col-12 align-center">
        <div class="row p-3">
          <div class="col-4 align-middle">
            This is a sample text
          </div>
          <div class="col-6">
            <div class="form-check-inline">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
            </div>
            <div class="form-check-inline">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
            </div>
            <div class="form-check-inline disabled">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
            </div>
          </div>
          <div class="col-2">
            <button type="button" class="btn btn-warning btn-block">Button</button>
          </div>
        </div>
      </div>
    </div>
    <div class="row main-row">
      <div class="col-12 align-center">
        <div class="row p-3">
          <div class="col-4 align-middle">
            This is a sample text
          </div>
          <div class="col-6">
            <div class="form-check-inline">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
            </div>
            <div class="form-check-inline">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
            </div>
            <div class="form-check-inline disabled">
              <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
            </div>
          </div>
          <div class="col-2">
            <button type="button" class="btn btn-secondary btn-block">Button</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.main-wrapper {
  background-color: #f8f9fa
}
.main-container {
  margin-top: 50px;    
  padding: 10px
}

.row.main-row {
  background-color: #ddd;  
  margin: 10px; 
  border: 5px solid #eee
}

链接到CodePen

https://codepen.io/anjanasilva/pen/PyzQWX

我希望这会有所帮助。谢谢。

在列表组项目中放置元素

1 个答案: