需要12列形式,分成两列6
Need 12 column form, split into two columns of 6
使用 bootstrap 4 阿尔法 6
我有一个应该如下所示的联系表:
使用下面的代码,我可以得到两列 6,但是字段都是错误的。这是该部分的代码:
<section id="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Contact Us</h2>
<hr width="30%">
<p>Need to get in touch? Fill in the form below for more information</p>
</div>
</div>
<div class="row">
<form class="form-inline col-md-12" role="form">
<div class="col-md-6">
<fieldset class="form-group">
<input type="email" class="form-control" id="email" placeholder="email...">
</fieldset>
<fieldset class="form-group">
<input type="text" class="form-control" id="name" placeholder="name...">
</fieldset>
<fieldset class="form-group">
<input type="text" class="form-control" id="subject" placeholder="subject...">
</fieldset>
</div>
<div class="col-md-6">
<fieldset class="form-group">
<textarea name="" id="message" rows="3" class="form-control" placeholder="message..."></textarea>
</fieldset>
<button type="submit" class="btn btn-outline-info btn-block">Submit</button>
</div>
</form>
</div>
</div>
</section>
使用上面的代码,表单看起来是这样的:
如您所见,列已正确拆分,但字段并未填满列的整个宽度。我在 firebug 中查看了它,它显示内联表单 class 的宽度为:auto。
.form-inline .form-control {
display: inline-block;
vertical-align: middle;
width: auto;
}
如果我关闭 width: auto;在 firebug 中,然后控件填充六列的整个宽度。我可以通过添加新的 class 并执行以下操作在我自己的样式表中修复此问题:
.contact-control
{
width: 100% !important;
}
我只是想知道是否有更好的方法,使用 bootstrap 中现有的 classes。
我认为 div 与 class 表单组一起使用一定比 fieldset.I 更好,希望这可能有所帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2><b>Contact Us</b></h2>
<hr width="30%">
<p>Need to get in touch? Fill in the form below for more information</p>
</div>
<div class="col-lg-6">
<div class="form-group">
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" aria-describedby="emailHelp" placeholder="Subject">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<textarea type="text" class="form-control" id="subject" rows="4" aria-describedby="emailHelp" placeholder="Subject" ></textarea>
</div>
<button type="submit" class="btn btn-outline-info btn-block">Submit</button>
</div>
</div>
</div>
</section>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
如果你给它添加表单标签,它就不起作用了。我这里有很好的例子,任何 CSS
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 class="heading">Utvärderingsformulär RETTS Nära Pilot - (Tranås VC)</h4>
<hr>
</div>
</div>
<form id="datainsamlingForm" method="POST" target="no-targer">
<div class="row">
<div class="col-md-6">
<label class="control-label">App version number</label>
<select class="form-control">
<option>Version 1</option>
<option>Version 2</option>
<option>Version 3</option>
</select>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Push Message</label>
<p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
<input type="text" class="form-control" id="inputSuccess1">
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<label class="control-label">Content</label>
<p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
<select class="form-control">
<option>Offer 1</option>
<option>Offer 2</option>
</select>
</div>
<div class="col-md-6">
<label class="control-label">Play sound</label>
<p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
<select class="form-control">
<option>Sound 1</option>
<option>Sound 2</option>
<option>Sound 3</option>
</select>
</div>
</div>
<div class="row">
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Publish date/time</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control">
<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Expire date/time</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control">
<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<h2>
<a type="button" class="btn btn-custom btn-lg">Publish</a>
</h2>
</div>
</div>
<hr>
</form>
</div>
使用 bootstrap 4 阿尔法 6
我有一个应该如下所示的联系表:
使用下面的代码,我可以得到两列 6,但是字段都是错误的。这是该部分的代码:
<section id="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Contact Us</h2>
<hr width="30%">
<p>Need to get in touch? Fill in the form below for more information</p>
</div>
</div>
<div class="row">
<form class="form-inline col-md-12" role="form">
<div class="col-md-6">
<fieldset class="form-group">
<input type="email" class="form-control" id="email" placeholder="email...">
</fieldset>
<fieldset class="form-group">
<input type="text" class="form-control" id="name" placeholder="name...">
</fieldset>
<fieldset class="form-group">
<input type="text" class="form-control" id="subject" placeholder="subject...">
</fieldset>
</div>
<div class="col-md-6">
<fieldset class="form-group">
<textarea name="" id="message" rows="3" class="form-control" placeholder="message..."></textarea>
</fieldset>
<button type="submit" class="btn btn-outline-info btn-block">Submit</button>
</div>
</form>
</div>
</div>
</section>
使用上面的代码,表单看起来是这样的:
如您所见,列已正确拆分,但字段并未填满列的整个宽度。我在 firebug 中查看了它,它显示内联表单 class 的宽度为:auto。
.form-inline .form-control {
display: inline-block;
vertical-align: middle;
width: auto;
}
如果我关闭 width: auto;在 firebug 中,然后控件填充六列的整个宽度。我可以通过添加新的 class 并执行以下操作在我自己的样式表中修复此问题:
.contact-control
{
width: 100% !important;
}
我只是想知道是否有更好的方法,使用 bootstrap 中现有的 classes。
我认为 div 与 class 表单组一起使用一定比 fieldset.I 更好,希望这可能有所帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2><b>Contact Us</b></h2>
<hr width="30%">
<p>Need to get in touch? Fill in the form below for more information</p>
</div>
<div class="col-lg-6">
<div class="form-group">
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" aria-describedby="emailHelp" placeholder="Subject">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<textarea type="text" class="form-control" id="subject" rows="4" aria-describedby="emailHelp" placeholder="Subject" ></textarea>
</div>
<button type="submit" class="btn btn-outline-info btn-block">Submit</button>
</div>
</div>
</div>
</section>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
如果你给它添加表单标签,它就不起作用了。我这里有很好的例子,任何 CSS
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 class="heading">Utvärderingsformulär RETTS Nära Pilot - (Tranås VC)</h4>
<hr>
</div>
</div>
<form id="datainsamlingForm" method="POST" target="no-targer">
<div class="row">
<div class="col-md-6">
<label class="control-label">App version number</label>
<select class="form-control">
<option>Version 1</option>
<option>Version 2</option>
<option>Version 3</option>
</select>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Push Message</label>
<p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
<input type="text" class="form-control" id="inputSuccess1">
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<label class="control-label">Content</label>
<p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
<select class="form-control">
<option>Offer 1</option>
<option>Offer 2</option>
</select>
</div>
<div class="col-md-6">
<label class="control-label">Play sound</label>
<p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
<select class="form-control">
<option>Sound 1</option>
<option>Sound 2</option>
<option>Sound 3</option>
</select>
</div>
</div>
<div class="row">
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Publish date/time</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control">
<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Expire date/time</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control">
<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<h2>
<a type="button" class="btn btn-custom btn-lg">Publish</a>
</h2>
</div>
</div>
<hr>
</form>
</div>