Question

我是bootstrap的新手，我正在尝试在页面底部导航，li元素之间的空格相等，但我无法完成。你能帮帮我吗？

编辑1：当我使用如下时，导航李重叠。

这是Html：

 <!-- Nav -->
        <nav>
            <ul class="navigation">
                <li class="link center bottom move"><a href="#about" title="About">About</a></li>
                <li class="link center bottom move"><a href="#contact" title="Contact"><span lang="tr">İLETİŞİM</span></a></li>
                <li class="link center bottom move"><a class="btn" href="#subscribe" title="Subscribe">Subscribe</a></li>
            </ul>
        </nav>
        <!-- End Nav -->

以下是CSS：

body > header nav {
    height: 100%;
}
ul.navigation {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1em;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.navigation a {
    color: #FFF;
    font-weight: 700;
    padding: 0.25em 0;
    border-bottom: 2px solid transparent;
}
.navigation a:hover {
    text-decoration: none;
    border-color: #FFF;
}
.navigation .link {
    position: absolute;
    display: inline-block;
    width: 100%;
    text-align: center;
    transform-origin: center;
    -webkit-transform-origin: center;
}
.navigation .link.side {
    width: auto;
    margin-left: 0
}
.navigation .link.bottom {
    bottom: 4em;
}
.navigation .link.middle {
    top: 49%;
}
.navigation .link.left {
    left: 4em;
    -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.navigation .link.right {
    right: 4em;
    -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

以下是演示页面： demo page

Answer 1

你应该考虑使用放置在sticy页脚内的Bootstrap grid system。这应该将html元素保持在正确的位置，具体取决于屏幕宽度（也包括移动屏幕）。调整col-xs-*以获得适当的间距。

<footer class="footer">
  <div class="row">
    <div class="col-xs-4">
      <a href="#about" title="About">About</a>
    </div>
    <div class="col-xs-4">  
      <a href="#contact" title="Contact"><span lang="tr">İLETİŞİM</span></a>         
    </div>
    <div class="col-xs-4">
      <a class="btn" href="#subscribe" title="Subscribe">Subscribe</a>
    </div>
  </div>
</footer>

可以找到粘性<footer> here和css here

Answer 2

我明白了。添加样式标签解决了我的问题。

<nav>
            <ul class="navigation">

            <li class="link bottom move" style="left:12em;"><a href="#contact" title="Contact"><span lang="tr">İLETİŞİM</span></a></li>
            <li class="link bottom move"><a href="#contact" title="Contact"><span lang="tr">İLETİŞİM</span></a></li>
            <li class="link bottom move" style="right:12em;"><a href="#contact" title="Contact"><span lang="tr">İLETİŞİM1</span></a></li>
            </ul>

        </nav>

使用bootstrap

2 个答案: