bootstrap 4的列对齐（行内）问题答案

【问题标题】：Column alignment (within rows) issue with bootstrap 4bootstrap 4的列对齐（行内）问题
【发布时间】：2021-06-16 18:41:14
【问题描述】：

我正在使用 Bootstrap 4.6 创建响应式页面 - 我在让行与行对齐时遇到问题。

我希望我的页面看起来像这样：

                                 Topics  |  Gallery One  Gallery Two  Gallery Three

Most Popular Photos                                        * Most Popular  o Latest

但是，我有以下问题：

表单显示在同一行（视觉上），与包含“主题...”行的行
表单不在它自己的行内浮动

这是我的代码：

HTML

<div class="container">

  <div class="row float-right">
    <ul class="theme">Topics
      <li>Gallery One</li>
      <li>Gallery Two</li>
      <li>Gallery Three</li>
    </ul>
  </div>

  <div class="row">
    <div>
      <h2 class="font-weight-light text-center text-lg-left mt-4 mb-0">Most Popular Photos</h2>
    </div>
    <div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
        <label class="form-check-label" for="inlineRadio1">Most Popular</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
        <label class="form-check-label" for="inlineRadio2">Latest</label>
      </div>
      <div class="form-check form-check-inline">
        <button type="submit" class="btn btn-sm btn-success" id="submit" name="submit"/>Submit</button>
      </div>
    </div>  
  </div>

  <hr class="mt-2 mb-5">
  </div>
</div>

CSS

/* theme */
  ul.theme {
    padding: 5px 0px;
  }
  
  ul.theme li > a {
    color: #CACACA;
    text-decoration: none;
  }
  
  ul.theme li {
    display: inline;
    padding: 0px 4px;
  }
  
  ul.theme li a:hover {
    color: #275d9c;
  }
  
  ul.theme li:first-child { 
      border-left: 1px solid #CACACA;
      padding: 0px 4px;
  }
  
  ul.theme li.highlight {
    border-bottom: solid 1px red;
  }

如何解决这些问题？

【问题讨论】：

让这段代码在沙箱上可用....

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

给你...

首先，当你想用Bootstrap定位内容时，我建议你使用justify-content-进行水平定位，align-items-进行垂直定位，而不是使用浮动。

您在同一 container 中有两行（与您的原始代码相同）：

Topics|Gallery One Gallery Two Gallery Three 和
Most Popular photos • Most Popular • Latest Submit

第一行中的所有内容都应位于右侧，因此只需将 d-flex justify-content-end 类添加到第一个 row 即可将所有内容移至右侧。

对于第二行，这有点棘手，因为您希望“最受欢迎的照片”与“• 最受欢迎• 最新提交”在同一行中但是“最受欢迎的照片”应该位于左侧，“• 最受欢迎• 最新提交”应该位于右侧。将d-flex justify-content-end 或d-flex justify-content-start 添加到第二个row 将不起作用，因为它会将两者都移到左侧或都移到右侧。那么，您如何将这两者“分开”，以便您可以将“最受欢迎的照片”定位到左侧，并将“• 最受欢迎• 最新提交”定位到右侧然而仍然有他们两个在同一个row？ 解决方案：使用 Bootstrap 的网格系统。 您需要有两列（即使用两次col-6），最多为 12（6 + 6 = 12）。每个row 最多可以有12 列，因此如果您使用col-6 两次，这意味着您将内容分成两个相同宽度的列。如果您使用col-2 和col-10，则会导致左侧窄和右侧宽。

现在您在第二个 row 中的内容被“分隔”成两个相同宽度的列，您可以简单地将 d-flex justify-content-start 添加到第一个 col-6 （移动“最受欢迎的照片 " 到第二个row 的左侧）和d-flex justify-content-end 到第二个col-6 （将“• 最受欢迎• 最新提交”移动到第二个row 的右侧)。

关于这两行之间的空白，您可以通过对第二个row 应用负边距来解决此问题，如下所示：

.move_up {
  margin-top: -3.5%;
}

/* theme */

ul.theme {
  padding: 5px 0px;
  margin-right: 22px;
}

ul.theme li>a {
  color: #CACACA;
  text-decoration: none;
}

ul.theme li {
  display: inline;
  padding: 0px 4px;
}

ul.theme li a:hover {
  color: #275d9c;
}

ul.theme li:first-child {
  border-left: 1px solid #CACACA;
  padding: 0px 4px;
}

ul.theme li.highlight {
  border-bottom: solid 1px red;
}

.move_up {
  margin-top: -3.5%;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>

<body>

  <div class='container'>

    <div class='row d-flex justify-content-end'>
      <ul class='theme'>Topics
        <li>Gallery One</li>
        <li>Gallery Two</li>
        <li>Gallery Three</li>
      </ul>
    </div>

    <div class='row d-flex align-items-end move_up'>
      <div class='col-6 d-flex justify-content-start'>
        <h2 class='font-weight-light text-center text-lg-left mt-4 mb-0'>Most Popular Photos</h2>
      </div>
      <div class='col-6 d-flex justify-content-end'>
        <div class='form-check form-check-inline'>
          <input class='form-check-input' type='radio' name='inlineRadioOptions' id='inlineRadio1' value='option1'>
          <label class='form-check-label' for='inlineRadio1'>Most Popular</label>
        </div>
        <div class='form-check form-check-inline'>
          <input class='form-check-input' type='radio' name='inlineRadioOptions' id='inlineRadio2' value='option2'>
          <label class='form-check-label' for='inlineRadio2'>Latest</label>
        </div>
        <div class='form-check form-check-inline'>
          <button type='submit' class='btn btn-sm btn-success' id='submit' name='submit' />Submit</button>
        </div>
      </div>
    </div>

    <hr class='mt-2 mb-5'>
  </div>

</body>

</html>

【讨论】：

谢谢，这似乎在做我想要的（在定位与行方面） - 但是，它似乎对元素施加了最小高度 - 因此这两行最终占据了相当屏幕垂直尺寸的显着百分比。另外，您能否对我做错了什么添加一些解释 - 以及您的建议/代码如何修复/解决我做错的事情？谢谢
您想要减少这两行之间的空白吗？
是的，不仅如此，它们本身的行似乎“太高”了。高度是自动计算的，所以有很多垂直空白。我使用 Chrome Inspector 检查它的来源 - 期望看到一些先前的选择器应用边距或填充 - 但我找不到任何东西，所以我不知道为什么行这么高。
我在工作。我还没有机会测试它（我今天晚些时候回家时会这样做），但我已经赞成你的答案，因为它给出的细节，这不仅对我有帮助，而且对任何有将来会出现类似问题。