我想制作像this site或this site的标题，我的意思是我想在左侧放置徽标，在右侧放置菜单。但是我的标题在here上没有很好地浮动。我现在很困惑。
#header-right {
float: left;
}
#header-right {
float: right;
}<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="wrapper">
<!-- Header -->
<header id="header" class="header">
<div class="container" id="header-inner">
<div class="row">
<div id="header-left" class="clearfix">
<div id="logo" class="logo">
<a href="#">
<img src="http://i.huffpost.com/gen/4252154/images/o-EMBLEM-facebook.jpg" alt="logo" id="logo-img" class="logo-img" height="35" width="150">
</a>
</div> <!-- logo -->
</div> <!-- header-left -->
<div id="header-right">
<nav class="navbar navbar-default" id="">
<div class="navbar-header">
<a class="navbar-brand" href="#">Apple Juice</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- navbar-header -->
<!-- Global Navigation -->
<div class="gnav collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a class="" data-toggle="dropdown" href="index.html">Home <i></i></a>
<!-- Dropdown -->
<ul class="dropdown-menu">
<li>
<a class="" href='#'>ジュース <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">オレンジ</a></li>
<li><a href="#">アップル</a></li>
<li><a href="#">グレープ</a></li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">マグロ</a></li>
<li><a href="#">サーモン</a></li>
<li><a href="#">エンガワ</a></li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown active-->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">items <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li>
<a class="" href='#'>スマートフォン <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">iPhone</a></li>
<li><a href="#">Xperia</a></li>
<li><a href="#">Galaxy</a></li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">トマト</a></li>
<li><a href="#">レタス</a></li>
<li><a href="#">枝豆</a></li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">order <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>自分用</a></li>
<li><a class="" href='#'>他人用</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">contact <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>フォーム</a></li>
<li><a class="" href='#'>電話</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
</ul> <!-- nav navbar-nav -->
</div> <!-- gnav collapse navbar-collapse -->
</nav> <!-- navbar navbar-default -->
</div> <!-- header-right -->
</div> <!-- clearfix -->
</div> <!-- row -->
</div> <!-- container -->
</header>
</div> <!-- wrapper -->
啊，我通常在clearfix或<div class="row">中使用<header>而不是<div id="header-left">，但我在<div id="header-left">中写过。
答案 0 :(得分：1)
您可以使用the .navbar-right class：
使用
.navbar-left或.navbar-right实用程序类对齐导航链接，表单，按钮或文本。这两个类都将在指定的方向上添加一个CSS浮点数。例如，要对齐导航链接，请将它们放在单独的<ul>中，并应用相应的实用程序类。
请检查结果。这是你想要实现的目标吗？
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">Brand</a>
</div>
<div id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="">Right 1</a></li>
<li><a href="">Right 2</a></li>
<li><a href="">Right 3</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
我在您的代码中使用了<ul class="nav navbar-nav navbar-right">代替<ul class="nav navbar-nav">：
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="wrapper">
<!-- Header -->
<header id="header" class="header">
<div class="container" id="header-inner">
<div class="row">
<div id="header-left" class="clearfix">
<div id="logo" class="logo">
<a href="#">
<img src="http://i.huffpost.com/gen/4252154/images/o-EMBLEM-facebook.jpg" alt="logo" id="logo-img" class="logo-img" height="35" width="150">
</a>
</div> <!-- logo -->
</div> <!-- header-left -->
<div id="header-right">
<nav class="navbar navbar-default" id="">
<div class="navbar-header">
<a class="navbar-brand" href="#">Apple Juice</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- navbar-header -->
<!-- Global Navigation -->
<div class="gnav collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
<a class="" data-toggle="dropdown" href="index.html">Home <i></i></a>
<!-- Dropdown -->
<ul class="dropdown-menu">
<li>
<a class="" href='#'>ジュース <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">オレンジ</a></li>
<li><a href="#">アップル</a></li>
<li><a href="#">グレープ</a></li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">マグロ</a></li>
<li><a href="#">サーモン</a></li>
<li><a href="#">エンガワ</a></li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown active-->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">items <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li>
<a class="" href='#'>スマートフォン <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">iPhone</a></li>
<li><a href="#">Xperia</a></li>
<li><a href="#">Galaxy</a></li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">トマト</a></li>
<li><a href="#">レタス</a></li>
<li><a href="#">枝豆</a></li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">order <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>自分用</a></li>
<li><a class="" href='#'>他人用</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">contact <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>フォーム</a></li>
<li><a class="" href='#'>電話</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
</ul> <!-- nav navbar-nav -->
</div> <!-- gnav collapse navbar-collapse -->
</nav> <!-- navbar navbar-default -->
</div> <!-- header-right -->
</div> <!-- clearfix -->
</div> <!-- row -->
</div> <!-- container -->
</header>
</div> <!-- wrapper -->
答案 1 :(得分：1)
你的css错了，请将其中一个属性替换为
shared_ptr这将确保您的左侧区块仅占用适合的区域。