如何使表单与导航按钮在同一行上？ [英] How do I get the form to be on the same line as by navigation buttons?
本文介绍了如何使表单与导航按钮在同一行上？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试过将缩进和位置放在不同的位置，但它仍然显示在导航按钮的下方。我希望它在同一条线上。
我可能会使它有点凌乱，试图让它在同一行，如果是这样只是没有必要时取出。
`
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< title> Bootstrap For Beginners< / title>
< meta name =descriptioncontent =Hello World>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1，user-scalable = no>
<！ - 最新编译和缩小的CSS - >
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css>
<！ - 可选主题 - >
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css>
< style>
.nav {
}
.nav container-fluid {
}
.nav li {
display：inline;
padding：20px;
font-family：'Lucida Sans Unicode'，'Lucida Grande'，sans-serif;
}
。jumbotron {
}
。jumbotron container-fluid {
}
.jumbotron h1 {
.footer {
}
.footer container-fluid {
}
。 footer p {
}
< / style>
< / head>
< body>
< div class =nav>
< div class =container-fluid>
< ul class =nav nav-pills>
< li class =pull-right>< a href =＃>联系人< / a>< / li>
< li class =pull-right>< a href =＃>关于< / a>< / li&
< / ul>
< form class =form-horizontal>
< div class =form-group>
< div class =col-md-6>
< input type =emailclass =form-controlid =exampleInputEmail2placeholder =有反馈？>
< / div>
< div class =col-md-4>
< button type =submitclass =btn btn-default>提交反馈< / button>
< / div>
< / div>
< / form>
< / div>
< / div>
< div class =jumbotron>
< div class =container-fluid>
< div class =row>
< h1>学生< / h1>
< h1>商家< / h1>
< / div>
< / div>
< / div>
< div class =footer>
< div class =container-fluid>
< p>开发者：< / p>
< p>对于：< / p>
< / div>
< / div>
<！ - 最新编译和缩小的JavaScript - >
< script src =http://code.jquery.com/jquery-2.1.1.min.js>< / script>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js>< / script>
< / body>
< / html>
输入栏似乎对真的很小的窗口没有响应， / p>
我还希望页脚与nav标题和jumbotron的大小相同，以填充其间的空格，一切都适合窗口，没有滚动。
提前感谢。
解决方案
您的代码看起来不错，您只需将表单和导航封装在包装器/容器中，与col-md-6。我在这里为您创建了一个示例 http://www.bootply.com/P7VmPZOfXp 。
/ *这里使用的CSS将在bootstrap.css之后应用* /
.footer {
height：58px;
background：#ccc;
}
< div class =wrapper>
< div class =container>
< div class =row>
< div class =container-fluid>
< div class =col-md-6 col-lg-6>
< form class =form-horizontal>
< div class =form-group>
< div class =col-md-6>
< input class =form-controlid =exampleInputEmail2placeholder =有反馈？ type =email>
< / div>
< div class =col-md-4>
< button type =submitclass =btn btn-default>提交反馈< / button>
< / div>
< / div>
< / form><！ - .form-horizontal - >
< / div><！ - .col-6 - >
< div class =col-md-6 col-lg-6>
< div class =nav>
< ul class =nav nav-pills>
< li class =pull-right>< a href =＃>联系人< / a>< / li>
< li class =pull-right>< a href =＃>关于< / a>< / li&
< / ul>
< / div><！ - .nav - >
< / div><！ - .col-6 - >
< / div><！ - .fluid container - >
< / div><！ - .row - >
< / div><！ - .container - >
< / div><！ - .wrapper - >
< div class =jumbotron>
< div class =container-fluid>
< div class =row>
< h1>学生< / h1>
< h1>商家< / h1>
< / div>
< / div>
< / div><！ - .jumbotron - >
< div class =footer>
< div class =container-fluid>
< p>开发者：< / p>
< p>对于：< / p>
< / div>
< / div><！ - .footer - >
I've tried playing with putting the indents and placement in different places but it still appear underneath the navigation button. I want it on the same line across the top. I might of made it a bit messy trying to get it on the same line, if so just take out whenever isn't necessary. `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap For Beginners</title>
<meta name="description" content="Hello World">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style>
.nav {
}
.nav container-fluid {
}
.nav li {
display: inline;
padding: 20px;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
.jumbotron {
}
.jumbotron container-fluid {
}
.jumbotron h1 {
.footer {
}
.footer container-fluid {
}
.footer p {
}
</style>
</head>
<body>
<div class="nav">
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="pull-right"><a href="#">Contact</a></li>
<li class="pull-right"><a href="#">About</a></li>
</ul>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form>
</div>
</div>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h1>Student</h1>
<h1>Business</h1>
</div>
</div>
</div>
<div class="footer">
<div class="container-fluid">
<p>By:</p>
<p>For:</p>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
The input bar doesn't seem to be responsive on really really small windows, is that normal?
I also want the footer to be the same size as the nav header and the jumbotron to fill up the rest of the space in between, everything fits in the window with no scrolling.
Thanks in advance.
解决方案
Your code looks great, all you have to do is wrap the form and nav in a wrapper / container then separate the sections with col-md-6. I built an example for you here http://www.bootply.com/P7VmPZOfXp.
/* CSS used here will be applied after bootstrap.css */
.footer {
height: 58px;
background: #ccc;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="container-fluid">
<div class="col-md-6 col-lg-6">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?" type="email">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form><!-- .form-horizontal -->
</div><!-- .col-6 -->
<div class="col-md-6 col-lg-6">
<div class="nav">
<ul class="nav nav-pills">
<li class="pull-right"><a href="#">Contact</a></li>
<li class="pull-right"><a href="#">About</a></li>
</ul>
</div><!-- .nav -->
</div><!-- .col-6 -->
</div><!-- .fluid container -->
</div><!-- .row -->
</div><!-- .container-->
</div><!-- .wrapper-->
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h1>Student</h1>
<h1>Business</h1>
</div>
</div>
</div><!-- .jumbotron -->
<div class="footer">
<div class="container-fluid">
<p>By:</p>
<p>For:</p>
</div>
</div><!-- .footer -->
这篇关于如何使表单与导航按钮在同一行上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
