jquery - Bootstrap 3 : How to make margins responsive?

Question

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

问题是，当我开始缩小时，边距不会。它的行为就像一个与 nav-brand 发生碰撞的元素，因此 UL 列表堆叠在 nav-brand 下方。

我想让该边距具有响应性，因此它会相应地缩放并与导航品牌保持相同的相对距离。

我不能依赖 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 布局工具。

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

该站点有一些很好的示例，CSS-Tricks 也是如此。你还会发现很多其他的。

祝你好运!