将徽标与容器左侧对齐？

Question

我正在尝试使用容器中的顶部导航来实现复杂的布局，该容器与也在容器中的主体内容对齐。但是，在导航容器的左侧，我认为应该是容器流体。我希望在任何时候都有一个以左侧为中心的标识。

我已经尝试过绝对定位，但随后会在整个设备上变得混乱。我想要一个设置，我可以让它在导航容器上方折叠，其他容器/列跟在它下面。

JS小提琴：

https://jsfiddle.net/x58975c3/

以下是所需布局的示例：

<div class="container-fluid">
<div class="col-md-4 logo">
  Logo
</div>
<div class="col-md-8 nav">
  Nav
</div>
</div>

<div class="container container-content">
  <div class="row">
    <div class="col-md-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

这是可以使用Bootstrap还是更适合像Flexbox这样的东西？

Answer 1

您可以将第二个容器放在col-md-8列中，如下所示：https://jsfiddle.net/0kx5rz9x/

这也会导致徽标堆叠在移动设备主容器的顶部。

Answer 2

我一直在使用Flexbox，因为它更容易，而且在没有框架帮助的情况下构建自己的css结构非常有趣。我推荐这个网站：http://the-echoplex.net/flexyboxes/。您可以设置容器上的元素数量并测试定位。看一看，flex-flow= row | column和justify-content是重新定位的重要解决方案^^;

我也使用这个网站来区别并记住一些语法https://css-tricks.com/snippets/css/a-guide-to-flexbox/