如何使bootstrap 3.1.0表单崩溃像bootstrap导航条
How to make bootstrap 3.1.0 form collapse like bootstrap navbar
我需要使bootstrap v3.1.0表单可折叠和100%类似于bootstrap导航条。它会在引导导航条崩溃时崩溃。请帮帮我。下面是我的html代码:
<div class="form-container">
<div class="contact-form">
<div class="form-text">
<h3>Free Advice And Consultation</h3>
</div>
<form class="form-inline" role="form">
<div class="form-group middle-form">
<label for="exampleInputEmail2">Name</label>
<input type="name" class="form-control" id="exampleInputName" placeholder="Enter name">
</div>
<div class="form-group middle-form">
<label for="exampleInputPhone">Phone</label>
<input type="phone" class="form-control" id="exampleInputPhone" placeholder="Phone">
</div>
<div class="form-group middle-form">
<label for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group middle-form">
<label for="exampleInputEmail2">Treatment</label>
<select class="form-control">
<option>Relaxation Massage</option>
<option>Remedial Massage</option>
<option>Sports Massage</option>
<option>Trigger Point Massage</option>
<option>Float Bath</option>
<option>Infrared Sauna</option>
</select>
</div>
<button type="submit" class="btn btn-default middle-form">Send</button>
</form>
</div>
</div>
CSS: .form-container{
max-width: 1230px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.contact-form{
width:100%;
height:auto;
max-width:1680px;
background-color: #ac9762;
}
.form-text{
float:left;
width:230px;
}
.border-top{
padding-top: 30px;
padding-left: 30px;
height: 3px solid #fefdfc;
width:10px;
background-color:#fefdfc;
}
.form-text h3{
padding-top: 30px;
padding-left: 30px;
font-size:20px;
font-weight:bold;
color:#fefdfc;
}
label{
display: block;
padding-top: 30px;
}
.form-control{
margin-bottom: 30px;
border-radius: 0px;
margin-right: 30px;
}
.contact-form .btn{
border-radius: 0px;
margin-top: 24px;
}
.contact-form .btn-default{
background-color: #090805;
border-color: #090805;
padding-top: 5px;
color: #fefdfc;
}
.contact-form h3:before {
width: 4.5%;
background: none repeat scroll 0 0 #fefdfc;
border-top: 1px solid #fefdfc;
content: "";
height: 5px;
position: absolute;
margin-top: -10px;
}
试试这个:
<标题> 演示CSS:.form-container{
max-width: 1230px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.contact-form{
width:100%;
height:auto;
max-width:1680px;
background-color: #ac9762;
}
.form-text{
float:left;
width:230px;
}
.border-top{
padding-top: 30px;
padding-left: 30px;
height: 3px solid #fefdfc;
width:10px;
background-color:#fefdfc;
}
.form-text h3{
padding-top: 30px;
padding-left: 30px;
font-size:20px;
font-weight:bold;
color:#fefdfc;
}
label{
display: block;
padding-top: 30px;
}
.form-control{
margin-bottom: 30px;
border-radius: 0px;
margin-right: 30px;
}
.contact-form .btn{
border-radius: 0px;
margin-top: 24px;
}
.contact-form .btn-default{
background-color: #090805;
border-color: #090805;
padding-top: 5px;
color: #fefdfc;
}
.contact-form h3:before {
width: 4.5%;
background: none repeat scroll 0 0 #fefdfc;
border-top: 1px solid #fefdfc;
content: "";
height: 5px;
position: absolute;
margin-top: -10px;
}
.icon-bar {
background-color:violet;
}
HTML: <div class="form-container">
<div class="contact-form">
<div class="form-text">
<h3>Free Advice And Consultation</h3>
</div>
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button style="background-color:aqua" type="button" class="navbar-toggle" 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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="form-inline" role="form">
<div class="form-group middle-form">
<label for="exampleInputEmail2">Name</label>
<input type="name" class="form-control" id="exampleInputName" placeholder="Enter name">
</div>
<div class="form-group middle-form">
<label for="exampleInputPhone">Phone</label>
<input type="phone" class="form-control" id="exampleInputPhone" placeholder="Phone">
</div>
<div class="form-group middle-form">
<label for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" />
</div>
<div class="form-group middle-form">
<label for="exampleInputEmail2">Treatment</label>
<select class="form-control">
<option>Relaxation Massage</option>
<option>Remedial Massage</option>
<option>Sports Massage</option>
<option>Trigger Point Massage</option>
<option>Float Bath</option>
<option>Infrared Sauna</option>
</select>
</div>
<button type="submit" class="btn btn-default middle-form">Send</button>
</div>
</div>
</nav>
</div>
</div>
标题>
相关文章:
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- Bootstrap Accordion崩溃中的问题
- Bootstrap在加载时崩溃
- AngularJs的ui.bootstrap问题-崩溃不起作用
- Bootstrap 3导航崩溃不起作用
- 导航栏崩溃无法工作-Bootstrap+Github
- 导航崩溃无法工作[Twitter Bootstrap]
- Bootstrap 3在导航栏崩溃后,切换不会重新打开导航
- Bootstrap NavBar崩溃赢得't打开
- Bootstrap:固定导航静态顶部在顶部,但可滚动导航崩溃
- 如何使bootstrap 3.1.0表单崩溃像bootstrap导航条
- Bootstrap 3崩溃-随着职业的改变而改变图标
- 使用twitter bootstrap防止子元素崩溃
- “模块& # 39;myapp # 39;不可用"bootstrap崩溃
- Twitter Bootstrap除第一个外全部崩溃
- Bootstrap 3崩溃显示和隐藏重叠彼此
- Bootstrap扩展崩溃问题
- 当复选框被选中时,Twitter Bootstrap 3崩溃
- Bootstrap响应式导航条显示,但在IE8的任何分辨率下都崩溃了
- Bootstrap 3崩溃-隐藏内容在页面加载时闪烁