ブートストラップを使用してヘッダーを設計しようとしています。上部、右側、つまりヘッダーにロゴを配置したいと考えています。そして、ヘッダー全体の右側にブートストラップ検索バーを配置したいと思います。検索バーを右に浮かせようとしましたが、ヘッダー テキストの直後に配置されます。そのため、画像、ヘッダー テキスト、検索バーが次々に表示されるため、ブラウザー ウィンドウを最小化し続けると、ブートストラップのレスポンシブ レイアウトに従って適切にスタックされません。
<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;
}
右に浮かせようとすると、テキストと画像の間やテキストの下に入ってしまうことがあります。左側に画像、画像の右側にテキスト、ヘッダーの右端にテキストに沿って配置された検索バーが必要です。ヘッダーのデザインを手伝ってください。