引导-删除导航栏边框半径

Question

我用以下超文本标记语言制作了页脚：

<nav class="navbar navbar-inverse navbar-bottom">
     <div class="container">
           <p class="navbar-text pull-left">Copyright &copy; OLShop.com 2016</p>
           <ul class="nav navbar-nav navbar-right">
               <li><a href="register_form.php">About Us</a></li>
               <li><a href="register_form.php">Twitter</a></li>
               <li><a href="register_form.php">Facebook</a></li>
               <li><a href="register_form.php">Instagram</a></li>
           </ul>
       </div>
</nav>

当我把它设置为固定时，一切都很完美。但是当我把页脚设置为不固定时，它不在页面底部（浮动），并且有边框半径。如何将它设置为页面底部（不固定）并删除边框半径？

任何指导都将非常感激。

Answer 1

你可以把它的html放在正确的位置（可能在页脚标签中）。

JsFiddle：http://jsfiddle.net/nnndfcad/1/

或者你可以使用绝对定位，比如@santon的答案。但我强烈反对这种做法。

根据你的代码，一个简单的

.navbar-inverse {
     border-radius: 0px;
}

我们应该解决它。

Answer 2

很简单。试试这个：

<nav>
     <div class="container">
           <p class="navbar-text">Copyright &copy; OLShop.com 2016</p>
           <ul class="text-center inline-me">
               <li><a href="register_form.php">About Us</a></li>
               <li><a href="register_form.php">Twitter</a></li>
               <li><a href="register_form.php">Facebook</a></li>
               <li><a href="register_form.php">Instagram</a></li>
           </ul>
       </div>
</nav>

在自定义CSS中，添加以下内容：

ul.inline-me li a {display:inline; padding-right:4px;}

希望这有帮助。

Answer 3

你需要用CSS定位将导航定位在页面底部。请参阅我之前关于定位的帖子。此外，您还应该覆盖引导中的媒体查询，以删除边界半径。

我附上了一段代码片段，但它在这种形式下不起作用。您应该复制HTML代码，并使用代码段中的CSS样式创建一个新的外部样式表，然后在引导后添加它。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="stylesheet.css"/>

footer {
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
}

@media (min-width: 768px) {
    .navbar {
        border-radius: 0;
    }
}

.navbar{
     margin-bottom:0;
     bottom:0;
 }

html lang-html prettyprint-override"><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
    <nav class="navbar navbar-inverse navbar-bottom">
        <div class="container">
            <p class="navbar-text pull-left">Copyright &copy; OLShop.com 2016</p>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="register_form.php">About Us</a></li>
                <li><a href="register_form.php">Twitter</a></li>
                <li><a href="register_form.php">Facebook</a></li>
                <li><a href="register_form.php">Instagram</a></li>
            </ul>
        </div>
    </nav>
</footer>