HTML/Bootstrap 布局

Question

我正在尝试像此处的图像一样布置一个部分。

我正在使用 bootstrap 4. 我试过使用行和列进行布局，但永远无法实现这种外观。现在我正在使用 <ul> 和 <li>。在 <li> 里面我有 3 个输入。我试过将所有三个放在 <div class="form-group form-inline"> 中，还尝试将它们分离到单独的“表单组”div 中，但没有成功。我敢肯定，我对如何安排事情还不够了解。我希望有人能帮助我理解，也许能帮助我。

这和我来的一样接近，但我似乎无法正确设置宽度，而且它似乎打破了新线。

<div id="cardBody" class="card-body">
  <div class="row">
    <div class="container-fluid">
      <div class="col-md-6">
        <label class="control-label ml-2">Description</label>
      </div>
      <div class="col-md-4">
        <label class="control-label">Link</label>
      </div>
      <div class="col-md-1">
        <label class="control-label">Count</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <form>
        <ul id="itemList" class="list-group">
          <li class="list-group-item">
            <div class="form-group form-inline mb-0">
              <label for="description">&#8942;&#8942;</label>
              <input type="text" class="form-control ml-2 mr-2" id="description" placeholder="">

              <label class="sr-only" for="link">Link</label>
              <input type="text" class="form-control mr-2" id="link" placeholder="">

              <label class="sr-only" for="count">Count</label>
              <input type="text" class="form-control mr-2" id="count" placeholder="">
            </div>
          </li>
          <li class="list-group-item">
            <div class="form-group form-inline mb-0">
              <label for="description2">&#8942;&#8942;</label>
              <input type="text" class="form-control ml-2 mr-2" id="description2" placeholder="">

              <label class="sr-only" for="link2">Link</label>
              <input type="text" class="form-control mr-2" id="link2" placeholder="">

              <label class="sr-only" for="count2">Count</label>
              <input type="text" class="form-control mr-2" id="count2" placeholder="">
            </div>
          </li>
          <li class="list-group-item">&#8942;&#8942;</li>
          <li class="list-group-item">4</li>
          <li class="list-group-item">5</li>
          <li class="list-group-item">6</li>
        </ul>
      </form>
    </div>
  </div>
</div>

无论如何，提前感谢您提供的任何帮助或见解。

Answer 1

这对我有用。您可能希望将内联样式放入 css 文件中。

<div class="container">
  <div id="cardBody" class="card-body">
    <div class="row">
      <div class="container-fluid d-flex">
        <div class="col-md-7">
          <label class="control-label ml-4">Description</label>
        </div>
        <div class="col-md-4">
          <label class="control-label">Link</label>
        </div>
        <div class="col-md-1">
          <label class="control-label">Count</label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <form>
          <ul id="itemList" class="list-group">
            <li class="list-group-item">
              <div class="row">
                <div class="col-7 form-group form-inline mb-0">
                  <div class="d-flex" style="width: 100%;">
                    <label for="description">&#8942;&#8942;</label>
                    <input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
                  </div>
                </div>
                <div class="col-4 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
                </div>
                <div class="col-1 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="row">
                <div class="col-7 form-group form-inline mb-0">
                  <div class="d-flex" style="width: 100%;">
                    <label for="description">2</label>
                    <input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
                  </div>
                </div>
                <div class="col-4 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
                </div>
                <div class="col-1 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="row">
                <div class="col-7 form-group form-inline mb-0">
                  <div class="d-flex" style="width: 100%;">
                    <label for="description">3</label>
                    <input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
                  </div>
                </div>
                <div class="col-4 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
                </div>
                <div class="col-1 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="row">
                <div class="col-7 form-group form-inline mb-0">
                  <div class="d-flex" style="width: 100%;">
                    <label for="description">4</label>
                    <input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
                  </div>
                </div>
                <div class="col-4 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
                </div>
                <div class="col-1 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="row">
                <div class="col-7 form-group form-inline mb-0">
                  <div class="d-flex" style="width: 100%;">
                    <label for="description">5</label>
                    <input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
                  </div>
                </div>
                <div class="col-4 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
                </div>
                <div class="col-1 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
                </div>
              </div>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</div>

HTML/Bootstrap 布局

HTML/Bootstrap layout

html

twitter-bootstrap

bootstrap-4

layout

html-lists