我设法将我的html表单转换为在表单组中并排放置一些字段，以减少表单的整体高度，但是我无法摆脱字段右侧的多余空白。下面的红色框是来自容器，字段集还是表单组？我是html / Boostrap的新手。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="icon" href="https://wonderfest.com/wp-content/uploads/2017/01/favicon.ico" type="image/x-icon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Search</title>
<style>
#outline {
position: relative;
height: auto;
width: auto;
/*margin: 18px auto 0;*/
margin: 10px 24px 0 24px;
border: 1px groove #ddd !important;
}
.logoimages {
width: auto;
height: auto;
position: absolute;
text-align: center;
top: 30px;
left: 15px;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#title {
width: auto;
top: 90px;
position: absolute;
visibility: visible;
left: 0px;
}
#title .title-content {
font-family: 'Roboto', sans-serif;
font-weight: bolder;
font-size: 32px;
color: #e6bb57;
}
.line-bottom {
border-bottom: 5px solid #E6BB57;
width: 400px;
margin-left: auto;
margin-right: auto;
}
p {
color: #666;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
margin-top: 5px;
}
h3 {
color: #666;
font-size: 60px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
width: auto;
}
h4 {
font-weight: bold;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
h5 {
font-weight: 500;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
a {
color: #666;
font-family: 'Roboto', sans-serif;
text-decoration: underline;
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-family: 'Roboto', sans-serif;
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width:auto;
padding:0 10px;
border-bottom:none;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
</style>
</head>
<body>
<noscript>
<style>
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
<h4>JavaScript is disabled on your browser. You will not be able to use this application until it is enabled.</h4>
<h5>Please refer to your browser's specific configuration details to change this setting.</h5>
<p align="center">© <?php echo date('Y')?> USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</noscript>
<div class="pagecontainer">
<div id="outline">
<div id="bckgrnd" style="text-align: center">
<img src="../common/img/background-1.jpg"/>
<div class="logoimages" style="text-align: center">
<img src="../common/img/combined_images.png" class="center-block img-responsive" id="top-img1" width="454" height="61" />
</div>
<div id="title" style="text-align: center">
<h3 class="title-content">Search</h3>
<div class="line-bottom"></div>
</div>
</div>
<div>
<p align="center">
<a href="javascript:window.location.href = '../common/php/logout.php';" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-log-out"></span> Log out
</a>
</p>
</div>
<div class="container" style="padding:10px 10px;">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Search criteria</legend>
<form id="searchForm" name="searchForm" class="form-horizontal">
<div class="fields-search"> <!--for textfields -->
<div class="form-group">
<div class="col-sm-2">
<label for="barcode" class="sr-only"></label>
<input id="barcode" name="barcode" class="form-control input-group-lg" type="text" placeholder="Barcode" value="">
</div>
<div class="col-sm-5">
<label for="entry-number" class="sr-only"></label>
<input id="entry-number" name="entry-number" class="form-control input-group-lg" type="text" placeholder="Entry # (separate multiple entries with commas)" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label for="first-name" class="sr-only"></label>
<input id="first-name" name="first-name" class="form-control input-group-lg" type="text" placeholder="First name" value="">
</div>
<div class="col-sm-4">
<label for="last-name" class="sr-only"></label>
<input id="last-name" name="last-name" class="form-control input-group-lg" type="text" placeholder="Last name" value="">
</div>
</div><!--/form-group-->
<div class="form-group">
<div class="col-sm-7">
<label for="title-name" class="sr-only"></label>
<input id="title-name" name="title-name" class="form-control input-group-lg" placeholder="Title or name of entry" value="">
</div>
</div>
</div>
</form>
</fieldset>
</div>
<br/>
<br/>
<div id="footer">
<p align="center">© <?php echo date('Y')?>USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</div>
</div>
<div class="modalLoading"></div>
</body>
</html>
我相信我的问题与How to remove or reduce the white space in bootstrap?有所不同，因为我尝试了无填充类并且没有区别。
最佳答案
在表单组元素中更改了col-sm- *类。还要在字段集div之前添加广告行和col-sm-7 div
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="icon" href="https://wonderfest.com/wp-content/uploads/2017/01/favicon.ico" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Search</title>
<style>
#outline {
position: relative;
height: auto;
width: auto;
/*margin: 18px auto 0;*/
margin: 10px 24px 0 24px;
border: 1px groove #ddd !important;
}
.logoimages {
width: auto;
height: auto;
position: absolute;
text-align: center;
top: 30px;
left: 15px;
}
img {
max-width: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
#title {
width: auto;
top: 90px;
position: absolute;
visibility: visible;
left: 0px;
}
#title .title-content {
font-family: 'Roboto', sans-serif;
font-weight: bolder;
font-size: 32px;
color: #e6bb57;
}
.line-bottom {
border-bottom: 5px solid #E6BB57;
width: 400px;
margin-left: auto;
margin-right: auto;
}
p {
color: #666;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
margin-top: 5px;
}
h3 {
color: #666;
font-size: 60px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
width: auto;
}
h4 {
font-weight: bold;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
h5 {
font-weight: 500;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
a {
color: #666;
font-family: 'Roboto', sans-serif;
text-decoration: underline;
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-family: 'Roboto', sans-serif;
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8)
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
</style>
</head>
<body>
<noscript>
<style>
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
<h4>JavaScript is disabled on your browser. You will not be able to use this application until it is enabled.</h4>
<h5>Please refer to your browser's specific configuration details to change this setting.</h5>
<p align="center">© <?php echo date('Y')?> USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</noscript>
<div class="pagecontainer">
<div id="outline">
<div id="bckgrnd" style="text-align: center">
<img src="../common/img/background-1.jpg" />
<div class="logoimages" style="text-align: center">
<img src="../common/img/combined_images.png" class="center-block img-responsive" id="top-img1" width="454" height="61" />
</div>
<div id="title" style="text-align: center">
<h3 class="title-content">Search</h3>
<div class="line-bottom"></div>
</div>
</div>
<div>
<p align="center">
<a href="javascript:window.location.href = '../common/php/logout.php';" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-log-out"></span> Log out
</a>
</p>
</div>
<div class="container" style="padding:10px 10px;">
<div class="row">
<div class="col-sm-7">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Search criteria</legend>
<form id="searchForm" name="searchForm" class="form-horizontal">
<div class="fields-search">
<!--for textfields -->
<div class="form-group">
<div class="col-sm-4">
<label for="barcode" class="sr-only"></label>
<input id="barcode" name="barcode" class="form-control input-group-lg" type="text" placeholder="Barcode" value="">
</div>
<div class="col-sm-8">
<label for="entry-number" class="sr-only"></label>
<input id="entry-number" name="entry-number" class="form-control input-group-lg" type="text" placeholder="Entry # (separate multiple entries with commas)" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="first-name" class="sr-only"></label>
<input id="first-name" name="first-name" class="form-control input-group-lg" type="text" placeholder="First name" value="">
</div>
<div class="col-sm-6">
<label for="last-name" class="sr-only"></label>
<input id="last-name" name="last-name" class="form-control input-group-lg" type="text" placeholder="Last name" value="">
</div>
</div>
<!--/form-group-->
<div class="form-group">
<div class="col-sm-12">
<label for="title-name" class="sr-only"></label>
<input id="title-name" name="title-name" class="form-control input-group-lg" placeholder="Title or name of entry" value="">
</div>
</div>
</div>
</form>
</fieldset>
</div>
</div>
</div>
<br/>
<br/>
<div id="footer">
<p align="center">©
<?php echo date('Y')?>USA, INC.</p>
<p align="center">Version
<?php echo $pageVer?>
</p>
</div>
</div>
</div>
<div class="modalLoading"></div>
</body>
</html>