堆棧內存溢出
  簡體   English   中英

如何減少fieldset / form-group中的多余空白

[英]How to reduce excessive white space in fieldset/form-group

 原文  2018-06-12 02:24:20  6   1    html/ css/ html5/ twitter-bootstrap-3

問題描述

我設法將我的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>

我相信我的問題不同於如何刪除或減少引導程序中的空白？ 因為我嘗試了無填充類，所以沒有區別。

1 個解決方案

解決方案1
 1 已采納  2018-06-12 02:29:43

在表單組元素中更改了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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 表單組不調整空間？ <label>引導程序表單內聯和表單組中標簽</label>周圍的空白 折疊表格組 如何使用表單與類表單組、表單水平 如何移除 <div form-group> ii Bootstrap表單組對齊 如何在引導程序中向表單組添加鏈接或按鈕 如何在jQuery中隱藏帶有標簽的表單組輸入框？ 如何選擇名為“form-group”的標簽中包含的類？ 如何使引導警報與表單組中的輸入大小相同？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM