Question

我有这个html结构：

<div class="container">
   <div class="row">
      <div class="col-lg-9 description"></div>
      <div class="col-lg-3 sidebar"></div>
      <div class="col-lg-9 comments"></div>
   </div>
</div>

最终效果如下：我需要这个HTML结构，因为当我有一个较小的视口和Bootstrap切换到1列模式时，我需要边栏列在描述和注释列之间（实际上有空格）。

问题在于，当模板未处于＆＃34;移动模式＆＃34;时，我希望避免使用该空格。

我尝试了很多方法，但我无法做到这一点，有人可以帮助我吗？

修改

我试过这种方式：

<div class="container">
   <div class="row">
      <div class="col-lg-9">
         <div class="description"></div>
         <div class="comments"></div>
      </div>
      <div class="col-lg-3 sidebar"></div>
   </div>
</div>

并试图通过使用css＆＃34; order＆＃34;重新排序，但是没有工作（它允许我做的唯一事情是将侧边栏放在页面的开头，但不是＆＃ 39; t我想要的东西。）

Answer 1

它正在发生，因为 Bootstrap 4是flexbox ，并且所有列都与最高列的高度相同...

而不是：

 ------------------  ---------
|                  ||         |
|                  ||         |
 ------------------ |         |
 ------------------ |         |
|                  ||         |
 ------------------  ---------

你明白了：

 ------------------  ---------
|                  ||         |
|                  ||         |
 ------------------ |         |
                    |         |
                    |         |
 ------------------  ---------
|                  |
 ------------------

通常，您可以通过嵌套列来解决此问题（正如您所尝试的那样），但是您无法获得所需的列顺序....

<强>嵌套：

<div class="container">
    <div class="row">
        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-12 description"></div>
                <div class="col-lg-12 commments"></div>
            </div>
        </div>
        <div class="col-lg-3 sidebar"></div>
    </div>
</div>

但是，要获得所需的列顺序，列必须包含在单个.row中。

<强>花车：

因此，BS4中的解决方法是使用浮点数（如BS3一样），如下所述： Bootstrap 4 - I don't want columns to have the same height。像这样：

https://www.codeply.com/go/wnRnLl3Jmo

<div class="container">
   <div class="row d-lg-block">
      <div class="col-lg-9 float-left description">Desc</div>
      <div class="col-lg-3 float-right sidebar">Sidebar</div>
      <div class="col-lg-9 float-left comments">Comments</div>
   </div>
</div>

行d-lg-block设置display:block而不是display:flex，这允许列以lg屏幕宽度浮动。

相关：
Bootstrap with different order on mobile version

Answer 2

.description {
  background-color: red
}

.sidebar {
  background-color: blue
}

.comments {
  background-color: green
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-12 description">description</div>
  </div>
  <div class="row justify-content-end">
    <div class="col-12 col-lg-3 sidebar">sidebar</div>
  </div>
  <div class="row">
    <div class="col-12 col-lg-9 comments">comments</div>
  </div>
</div>
</div>

我认为这就是你的目标

Bootstrap 4

2 个答案: