Question

我设法将我的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?不同，因为我尝试了无填充类并且没有任何区别。

Answer 1

更改了表单组元素中的col-sm- *类。还要在fieldset 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>

如何减少fieldset / form-group

1 个答案: