Question

我正在研究网站的标题，我有一个使用＆＃34; margin-left＆＃34;的特殊对齐的UL列表。 css property。

问题在于，当我开始按比例缩小时，保证金并非如此。它只是表现为与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。它可以轻松完成许多难以处理的布局 - 它可以在不久的将来成为标准的网页布局工具。

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

该网站有一些很好的例子，CSS-Tricks也是如此，你也可以找到很多其他网站。

祝你好运！

Bootstrap 3：如何使边距响应？

1 个答案: