我希望我的导航栏向右浮动。我尝试设置<ul class="nav navbar-nav float="right"，但导航栏仍然居中。我很确定浮动应该在这个标签上？我也试过text-align:right;，但也没用。
我在这里缺少什么？
HTML
<!-- page wrapper start -->
<!-- ================ -->
<div class="page-wrapper">
<!-- header-container start -->
<div class="header-container">
<!-- header start -->
<!-- classes: -->
<!-- "fixed": enables fixed navigation mode (sticky menu) e.g. class="header fixed clearfix" -->
<!-- "dark": dark version of header e.g. class="header dark clearfix" -->
<!-- "full-width": mandatory class for the full-width menu layout -->
<!-- "centered": mandatory class for the centered logo layout -->
<!-- ================ -->
<header class="header fixed clearfix">
<div class="container">
<div class="row">
<div class="col-md-3 ">
<!-- header-left start -->
<!-- ================ -->
<div class="header-left clearfix">
<!-- header dropdown buttons -->
<div class="header-dropdown-buttons visible-xs">
<div class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button>
<ul class="dropdown-menu dropdown-menu-right dropdown-animation">
<li>
<form role="search" class="search-box margin-clear">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Search">
<i class="icon-search form-control-feedback"></i>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- header dropdown buttons end-->
<!-- logo -->
<div id="logo" class="logo">
<a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/index.php"><img id="logo_img" src="http://<?php echo $_SERVER['HTTP_HOST'] ?>/images/graphics/logo.png" ></a>
</div>
</div>
<!-- header-left end -->
</div>
<div class="col-md-9">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- classes: -->
<!-- "onclick": Makes the dropdowns open on click, this the default bootstrap behavior e.g. class="main-navigation onclick" -->
<!-- "animated": Enables animations on dropdowns opening e.g. class="main-navigation animated" -->
<!-- "with-dropdown-buttons": Mandatory class that adds extra space, to the main navigation, for the search and cart dropdowns -->
<!-- ================ -->
<div class="main-navigation animated with-dropdown-buttons">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav" float="right">
<!-- mega-menu start -->
<li class="mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/index.php">Hjem</a>
</li>
<!-- mega-menu end -->
<!-- mega-menu start -->
<li class="dropdown mega-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Kompetencer</a>
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-lg-8 col-md-9">
<div class="row">
<div class="col-sm-4">
<h4 class="title">UX/UI</h4>
<div class="divider"></div>
<ul class="menu">
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/ux-ui.php"><i class="fa fa-angle-right"></i>UX/UI</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/prototyping.php"><i class="fa fa-angle-right"></i>Prototyping</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/web-design.php"><i class="fa fa-angle-right"></i>Web Design</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/grafisk-design.php"><i class="fa fa-angle-right"></i>Grafisk Design</a></li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Webudvikling</h4>
<div class="divider"></div>
<ul class="menu">
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/webudvikling.php"><i class="fa fa-angle-right"></i>Webudvikling</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/php-mysql.php"><i class="fa fa-angle-right"></i>PHP & MySQL databaser</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/wordpress.php"><i class="fa fa-angle-right"></i>Wordpress</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/umbraco.php"><i class="fa fa-angle-right"></i>Umbraco</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/joomla.php"><i class="fa fa-angle-right"></i>Joomla</a></li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Marketing Automation</h4>
<div class="divider"></div>
<ul class="menu">
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/mautic.php"><i class="fa fa-angle-right"></i>Mautic</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/landesider.php"><i class="fa fa-angle-right"></i>Landesider</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 hidden-sm">
<h4 class="title">Oversigt over kompetencer</h4>
<p class="mb-10"><a href=" http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/alle-kompetencer.php"><u>En oversigt over alle mine kompetencer</u></a></p>
<img src="http://<?php echo $_SERVER['HTTP_HOST']?>/images/graphics/kompetencer.png" alt="The Project">
</div>
</div>
</li>
</ul>
</li>
<li class="mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST']?>/portfolio.php">Portfolio</a>
</li>
<!-- mega-menu end -->
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil</a>
<ul class="dropdown-menu">
<li><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/uddannelse.php">Uddannelse</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/erhvervserfaring.php">Erhvervserfaring</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/personlighed.php">Personlighed</a></li>
</ul>
</li>
<li class="mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST']?>/artikler-index.php">Artikler</a>
</li>
<!-- mega-menu start -->
<!-- mega-menu start -->
<li class="mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kontakt.php">Kontakt</a>
</li>
</ul>
<!-- main-menu end -->
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
<!-- header end -->
</div>
<!-- header-container end -->
答案 0 :(得分：1)
它位于左侧的原因很少。您需要首先定位导航所在的容器。它右边有一个填充物。删除它：
.with-dropdown-buttons .navbar-default .navbar-collapse {
padding-right: 0;
}
然后您可以将导航栏浮动到右侧，但您需要具体了解屏幕宽度。
@media (min-width: 768px) {
.navbar-nav {
float: right;
}
}
当我在开发人员工具中进行这些更改时，这对我有用。如果它不起作用，你需要检查它是否正确覆盖bootstrap CSS，或者你可以使用！important。
修改
您可能还想删除最后一个菜单项上的填充，使其与容器边缘齐平。你可以尝试：
.navbar-default .navbar-nav > li:last-child > a {
padding-right: 0;
}
答案 1 :(得分：0)
float是一个CSS属性。您可以这样使用它：
<ul class="nav navbar-nav" style="float: right;">
...
</ul>
请注意，UL是块标记，涵盖了所有宽度。因此，如果您希望它填充窗口宽度的所有宽度，您也应该为它设置宽度属性。
<ul class="nav navbar-nav" style="float: right; width: 800px;">
...
</ul>