Question

我的侧边栏被推下而不是与我的main课程保持联系，您可以在我的小提琴中更多地查看问题。（这是我很长一段时间没有在项目中使用bootstrap ）之一。

查看我的fiddle。

Answer 1

使用float代替flex是响应式设计的更好方法。尝试将sidebar和main置于div display flex和flex-wrap wrap。

这是一个例子 -

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.latest-single {
  width: 70%;
  background-color: blue;
}

.sidebar {
  width: 30%;
  background-color: green;
}

<div class="flexbox">
  <div class="latest-single">
    This is our primary content 
  </div>

  <div class="sidebar">
  This is our sidebar content  
  </div>
</div>

Answer 2

您必须选择如何显示它们的方式。（block，flex，table）

我通过在display:flex类上添加.container来实现它。

jsfiddle https://jsfiddle.net/31rjm8qb/7/

Answer 3

你有几个问题。

.main的宽度为100％，因此.sidebar无法容纳
.sidebar在.main没有的情况下浮动，因此他们不会排队

我认为尝试display: flexbox并完全删除花车是个好主意。请查看以下文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

边栏被推倒了

3 个答案: