我正在尝试使用引导程序设计标题。我想在顶部,右侧,即标题处放置一个徽标。我想在整个标题的右侧放置一个引导搜索栏。我试图将搜索栏向右浮动,但它被放置在标题文本之后。因此图像、标题文本和搜索栏一个接一个出现,因此当我不断最小化浏览器窗口时,根据引导程序的响应式布局,它们也不能正确堆叠。
<div class="container">
<img src="http://www.computerclipart.com/computer_clipart_images/cartoon_computer_and_books_0521-1004-3015-4128_SMU.jpg" height="90" width="120" />
<h1 class="logo"> Resource Directory
<form class="form-search pull-right">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
</h1>
</div>
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container" style="width: auto">
<!-- Nav Bar Contents goes here, removed it to minimize the code -->
</div>
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h2><center>XYZ University - Academic Resource Directory</center></h2>
Welcome to the Academic Resource Directory of XYZ University. All the resources related to academics can be found here!
</div>
<hr>
<footer>
<p>© Copy 2012</p>
</footer>
</div>
这是我添加的另一个自定义 css 文件。
h1 {
font-size:1.8em;
}
h2 {
font-size:1.4em;
}
img {
float: left;
}
.logo {
font:2.5em Arial;
margin:0 0 10px 0;
padding-top: 35px;
width:auto;
color:#000;
height: 70px;
float: left;
}
body {
background: #fff;
font-family:Arial;
font-size:0.8em;
}
.clear {
clear:both;
}
当我尝试向右浮动时,有时它也会出现在文本和图像之间或文本下方。我希望图像在左侧,图像右侧的文本和标题右端的搜索栏与文本对齐。请帮我设计我的标题。