Question

请参阅下面的代码片段。这是一个简单的导航栏。

不幸的是，崩溃切换按钮出现在品牌上方（因为它打破了线条，表现得像一个块），这是意料之外的。预期的行为是它出现在旁边。此外，如果我尝试使用.navbar-right浮动它，它不起作用。它可能是什么？

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="btn btn-default btn-sm navbar-btn" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="glyphicon glyphicon-chevron-down"></span>
            </button>
            <a class="navbar-brand" href="#">Projeto Si</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <form class="navbar-form form-inline navbar-right">
                <div class="input-group" style="max-width: 400px">
                    <input id="filter" class="form-control input-sm" type="text" placeholder="O que você está procurando?"/>
                    <span class="input-group-btn">
                        <button id="clearfilter" type="button" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-search"></button>
                    </span>
                </div>
            </form>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
</nav>

Answer 1

嘿，是什么意思？我也来自巴西。

你只有html文件？如果是的话你需要使用CSS。永远不要在html上使用样式，HTML用于内容，CSS用于样式。

创建一个css文件并将下面的代码放在head标记之间。

<head>

<link rel="stylesheet" type="text/css" href="FileName.css" />
</head>

之后选择要修改位置的类并尝试下面的代码

.navbar-right {

 position:absolute;
 left:150px;

}

尝试不同的像素值，看看哪一个更适合你。

如果您对css一无所知，我建议http://www.w3schools.com/ 在那里学习只是为了有一个概念。

Bootstrap：导航栏标题按钮

1 个答案: