如何获取引导HTML元素放在一行上

Question

我想在stackoverflow上创建一个网站标题。

我正在使用引导程序，但似乎无法使header元素显示在一行上。

有人对我如何实现这一目标有任何想法吗？

这是jsfiddle- https: //jsfiddle.net/31wxk9ak/2/。 根据屏幕的大小，您可能需要调整此页面上的页面拆分，以防止浏览器堆叠元素。

这是代码：

<html><head></head><body>
<div id="root">
    <div data-reactroot="" class="container fill">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar"><span
                            class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span></button>
                    <a class="navbar-brand" href="/">Home</a></div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a title="About" href="/about">About</a></li>
                        <li><a title="Contact" href="/contact">Contact</a></li>
                        <li>
                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="input-group"><input type="text" class="form-control"
                                                                    placeholder="Search..."
                                                                    value=""><span class="input-group-btn"><input
                                            type="button" class="btn btn-default" value="Go!"></span></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
                        <li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<link rel="stylesheet" href="assets/lib/bootstrap/3.3.7/css/bootstrap.min.css">

https://oss.maxcdn.com/respond/1.4.2/respond.min.js'>

Answer 1

您没有正确实现导航栏，请在搜索框中使用表格。

            <ul class="nav navbar-nav navbar-right">
              <li>
                <form class="navbar-form navbar-left">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
              </li>
              <li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
              <li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
            </ul>

JSFiddle演示

参考：

引导导航栏

Answer 2

显然有很多方法可以做到这一点，但我只介绍几个。 第一个使用浮动，只需将其应用于所有导航栏标头即可。

.navBarHeader {
    float: left;
}

或者，您可以使用内联块。

.navBarHeader {
    display: inline-block;
}

如何获取引导HTML元素放在一行上

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-09-26 19:43:06

解决方案2
0 2017-09-26 19:45:13

如何获取引导HTML元素放在一行上

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-09-26 19:43:06

解决方案2 0 2017-09-26 19:45:13

解决方案1
0 已采纳 2017-09-26 19:43:06

解决方案2
0 2017-09-26 19:45:13