Bootstrap 3：如何使边距响应？

Question

我现在正在处理网站的标题，并且具有使用“ margin-left” css属性进行特殊对齐的UL列表。

问题是，当我开始按比例缩小利润时，并没有。 它的行为就像是与nav品牌冲突的元素，因此UL列表堆叠在nav品牌下方。

我想让该边距响应，因此它会相应缩放，并且与nav品牌保持相同的相对距离。

我不能依靠CSS3 @media功能，因为我需要它对多个设备保持流畅和响应。

关于如何创建响应边距的任何想法？

<div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="assets/img/Logo.png" style="width: 150px;" ></a>
</div>
<div class="navbar-collapse collapse">

<ul class="nav navbar-nav" style="margin-left:550px;">
   <li><a href="">Documentation</a></li>
   <li><a href="">Dev. Login</a></li>   
   <li><a href="">Get Started</a></li>
</ul>

Answer 1

您可以查看flexbox。 它使许多布局的工作变得容易，而在其他情况下则很难。它正逐渐成为不久的将来的标准Web布局工具。

根据Flexbox解决的浏览器支持，Chrome 21 +，Firefox 22 +，Safari 6.1+和IE 11+。 如果您需要更广泛的IE支持，则可以使用条件注释为IE <11加载自定义CSS，这可以为您提供尽可能好的体验。

该站点有一些很好的例子， CSS-Tricks也有 ，您还会发现很多其他例子。

祝好运！