Html 分离引导按钮
我想复制我的“提交”按钮。当我这样做的时候,似乎bootstrap认为复制是navbar的一部分,所以当我这样做style=“margin top:30px;”时,navbar基本上会增长,直到它到达按钮。你自己看看这里:我想知道如何把那个按钮变成自己的,这样我就可以在页面中移动它了。我尝试过一些方法,比如将按钮表单放入容器和行div中,但它们似乎不起作用Html 分离引导按钮,html,twitter-bootstrap-3,Html,Twitter Bootstrap 3,我想复制我的“提交”按钮。当我这样做的时候,似乎bootstrap认为复制是navbar的一部分,所以当我这样做style=“margin top:30px;”时,navbar基本上会增长,直到它到达按钮。你自己看看这里:我想知道如何把那个按钮变成自己的,这样我就可以在页面中移动它了。我尝试过一些方法,比如将按钮表单放入容器和行div中,但它们似乎不起作用 <a class="navbar-brand" href="#"><img src="img/logo.png" st
<a class="navbar-brand" href="#"><img src="img/logo.png" style="position: relative; top: -7.5px;" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated linkk</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" size=60px>
</div>
<button type="submit" class="btn btn-default" value="Open Window" onclick="window.open('http://www.cnn.com')">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
-
提交
-
提交您只是忘记添加关闭
nav
HTML标记(看起来是这样的:
)。您的代码(基于JSFIDLE)如下所示:
<!-- Your Navbar starts here -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#"><img src="img/logo.png" style="position: relative; top: -7.5px;" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated linkk</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" size=60px>
</div>
<button type="submit" class="btn btn-default" value="Open Window" onclick="window.open('http://www.cnn.com')">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- /.your navbar ends here -->
<!-- Here's your submit button, seperated from the navbar -->
<form style="margin-top: 400px;">
<button type="button" class="btn btn-default" value="Open Window" onclick="window.open('http://www.cnn.com')">Submit</button>
</form>
切换导航
-
提交
-
提交
避免将来出现类似问题的一个简单方法是使用文本编辑器,如或,每个编辑器都将显示开始标记是否与结束标记关联。不过别担心,我知道我还是经常犯这样的错误
以下是更新的。您应该将引导CSS作为外部资源包含在您的小提琴中,如下所示: