Bootstrap - 删除导航栏边框半径

Question

我使用以下HTML制作了一个页脚：

<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>

当我将其设置为固定时，一切都很完美。但是当我设置页脚没有固定时，它不是位于页面的底部（浮动）并且具有边界半径。如何将其设置到页面底部（不固定）并删除border-radius？

非常感谢任何指导。

Answer 1

您需要使用CSS定位将导航定位在页面底部。请参阅positioning上的早期帖子。 您还应该从引导程序覆盖媒体查询以删除border-radius。

我附加了一个代码段，但它不能以这种形式运行。 您应该使用代码段中的CSS样式复制HTML代码并创建一个新的外部样式表，然后在bootstrap之后添加它。

<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;
 }

<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>

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

如何将其放在页面底部（未修复）？

你可以把它放在正确的地方（可能在页脚标签内）。

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

或者您可以使用@ santon的绝对定位解释。 但我强烈反对这种方法。

如何删除border-radius？

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

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

应该解决它。