Question

我需要在页面中心制作菜单。在右侧，我需要白色空间的车道。它正在使用100％调整大小。但是当我缩小屏幕时，它不会保持相同的位置。

HTML

<div class="row header">
  <div class="row menu col-lg-offset-3 col-md-offset-3">
    <div class="container">
      <ul id="menu">
        <li><a href="index.php" style="background-color: #be5f28;">Úvod</a></li>

CSS

.menu {
    background-color: #f4f3f3;
    margin-top: 11px;
    padding: 2px;
    padding-left: 0px;
    padding-top: 3px;
    padding-bottom: 3px;

}

.header .container {
    padding-left: 0px;
    margin-left: 0px;
}

这是100％的情况 http://postimg.org/image/jyj7ylr0z/

这里有25％缩小 http://postimg.org/image/yshws51kl/

演示：http://zssever.damidev.com/

Answer 1

在你的代码中，我看到的最大错误是覆盖了'容器'类的'margin-left'属性。不应该这样做。 'margin-left'和'margin-right'应保留为'auto'，因为这是负责水平居中组件的原因。

html标记应该是：

<div class="header">
<div class="container">
    <div class="row menu col-lg-offset-1 col-md-offset-3 ">
        <ul id="menu" class="clearfix">
            <li>

需要进行一些小的调整，但这是解决问题的方法。修复布局后，菜单在更改缩放值时不会偏离其位置

Bootstrap菜单调整错误

1 个答案: