我試圖用Bootstrap來對齊HTML中的兩個對象，但是不起作用。我使用的代碼是這樣的:

<div class="row align-items-center">

  <div class="col-auto">
    <h6>Alignment Testing</h6>
  </div>

  <div class="col-auto ml-auto">
    <!-- ml-auto -->
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
      <input type="text" class="form-control" placeholder="Alignment Testing" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </div>

</div>

<link rel="stylesheet"  >

在您的& lth6 & gt當(dāng)h6占據(jù)8px的邊界底部時，使mb-0

<link rel="stylesheet" >
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="row align-items-center">
    <div class="col-auto">
        <h6 class="mb-0">Alignment Testing</h6>
    </div>            
    <div class="col-auto ml-auto">
        <div class="input-group">
            <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control" placeholder="Alignment Testing" aria-label="Username" aria-describedby="basic-addon1">
        </div>
    </div>
</div>

我想你想做這樣的事情-& gt；https://codepen.io/lynxSven/pen/qBQWVXZ

<div class="container">
  <div class="row ">

    <div class="col-12 text-center">
      <h6>Alignment Testing</h6>
    </div>

  </div>
</div>

當(dāng)您使用col-auto時，該框只有在需要時才會變大。 如果你想對齊文本，你必須給文本一些空間。

柔性框中應(yīng)使用對齊-項目-居中(https://getbootstrap.com/docs/4.0/utilities/flex/)

編輯阿林兩項 如果你想讓他們需要多少就拿多少，你可以隨時使用。col & quot然后它們將按百分比自動對齊。

<div class="container">
  <div class="row ">

    <div class="col text-center">
      <h6>Alignment Testing</h6>
    </div>
    <div class="col text-center" >
      second item

  </div>
</div>

所以如果你有3個class = & quotcol & quot在同一個節(jié)點上，它會給每個項目都將有33%的寬度。 如果有兩個節(jié)點，其中一個帶有class = & quotcol & quot，對方class = & quotcol-1 & gt； class = & quotcol & quot會像一個& quotcol-11"

用最少的代碼行使用bootstrap類:

<div class="container">
    <div class="row ">
      <div class="col-12 d-flex align-items-center">
        <h6 class="mb-0">Alignment Testing</h6>
        <div class="input-group ml-auto">
          <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
          <input type="text" class="form-control" placeholder="Alignment Testing" aria-label="Username" aria-describedby="basic-addon1">
      </div>
    </div>
  </div>
</div>