1

我正在尝试使用引导程序设计标题。我想在顶部，右侧，即标题处放置一个徽标。我想在整个标题的右侧放置一个引导搜索栏。我试图将搜索栏向右浮动，但它被放置在标题文本之后。因此图像、标题文本和搜索栏一个接一个出现，因此当我不断最小化浏览器窗口时，根据引导程序的响应式布局，它们也不能正确堆叠。

<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>&#169; 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;
}

当我尝试向右浮动时，有时它也会出现在文本和图像之间或文本下方。我希望图像在左侧，图像右侧的文本和标题右端的搜索栏与文本对齐。请帮我设计我的标题。

4

1 回答 1

3

您的<H1>. 修复此问题，然后继续您的 CSS 更改。

<h1 class="logo"> Resource Directory <!-- </h1> should be here -->
    <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><!-- Move </h1> so your form isn't enclosed -->
于 2012-12-06T17:22:26.093 回答