如何让表单组重叠？

时间：2016-07-08 21:04:49

标签： html css forms twitter-bootstrap-3

我为联系人信息构建一个简单的水平表单，其中包含备注的文本区域。我想要将地址块移动到该文本区域左侧有大量空白空间。我无法弄清楚如何让表单组重叠，或者甚至可能。我已尝试将所有手机2字段和地址字段放在同一列中，并使用<br>分隔线条，但这绝对不是正确的。这是表单组如何显示的相关代码和屏幕截图。任何提示将不胜感激。

<html>
<body>
    <?php require_once ("includes/php/header.php"); ?>
    <div class="container-fluid">
        <form id="newContact" action="newContact.php" method="POST" class="form-horizontal">
            <div class="form-group">
                <div class="col-md-1 col-md-offset-1">
                    <label class="control-label">
                        Vendor
                    </label>
                </div>
                <div class="col-md-2">
                    <select name="vendID" class="form-control">
                        <option disabled selected value=""> - select a vendor - </option>
                        <?php
                        $result = vendorDB::getInstance()->vendorList();
                        while ($row=  mysqli_fetch_array($result)):
                        ?>
                        <option value="<?php echo $row["VEND_ID"];?>"><?php echo $row["VEND_NAME"];?></option>
                        <?php
                        endwhile;
                        mysqli_free_result($result);
                        ?>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-1 col-md-offset-1">
                    <label class="control-label twoline-label">
                        First Name
                    </label>
                </div>
                <div class="col-md-2">
                    <input type="text" name="contFirst" class="form-control" />
                </div>
                <div class="col-md-1">
                    <label class="control-label twoline-label">
                        Last<br/>Name
                    </label>
                </div>
                <div class="col-md-2">
                    <input type="text" name="contLast" class="form-control" />
                </div>
                 <div class="col-md-1">
                    <label class="control-label twoline-label">
                        E-mail Address
                    </label>
                </div>
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="email" name="contEmail" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-1 col-md-offset-1">
                    <label class="control-label" style="padding-top: 7px">
                        Phone 1
                    </label>
                </div>
                <div class="col-md-2">
                    <div class="input-group">
                        <span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
                        <input type="text" name="contPhone1" class="form-control" placeholder="555-555-5555" />
                    </div>
                </div>
                <div class="col-md-1">
                    <select name="contPhone1Type" class="form-control">                        
                    </select>
                </div>
                <div class="col-md-1">
                    <label class="control-label">
                        Notes
                    </label>
                </div>

            </div>
            <div class="form-group">
                <div class="col-md-1 col-md-offset-1">
                    <label class="control-label" style="padding-top: 7px">
                        Phone 2
                    </label>
                </div>
                <div class="col-md-2">
                    <div class="input-group">
                        <span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
                        <input type="text" name="contPhone2" class="form-control" placeholder="555-555-5555" />
                    </div>
                </div>
                <div class="col-md-1" >
                    <select name="contPhone2Type" class="form-control">                        
                    </select>
                </div>
                <div class="col-md-6">
                    <textarea form="newContact" name="contNote" class="form-control" 
                              rows="11" style="resize: none" placeholder="(optional)"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-md-offset-1">
                    <label class="control-label">
                        Address
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-md-offset-1">
                    <input type="text" name="contAddr1" class="form-control" />
                </div>

            </div>
            <div class="form-group">
                <div class="col-md-4 col-md-offset-1">
                    <input type="text" name="contAddr2" class="form-control" />
                </div>

            </div>
            <div class="form-group">
                <div class="col-md-2 col-md-offset-1">
                    <label class="control-label">
                        City
                    </label>
                </div>
                <div class="col-md-1">
                    <label class="control-label">
                        State
                    </label>
                </div>
                <div class="col-md-2">
                    <label class="control-label">
                        ZIP
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-2 col-md-offset-1">
                    <input type="text" name="contAddrCity" class="form-control" />
                </div>
                <div class="col-md-1">
                    <select name="contAddrState" class="form-control">

                    </select>
                </div>
                <div class="col-md-1">
                    <input type="text" name="contAddrZip" class="form-control" />
                </div>
            </div>
            <div class="form-group">

            </div>
            <div class="form-group">

            </div>
             <div class="form-group">
                <div class="col-md-2 col-md-offset-3">
                    <span class="icon-input-btn">
                        <span class="glyphicon glyphicon-ok"></span>
                        <input type="submit" class="form-control btn btn-primary" value="Save New Contact"/>
                    </span>
                </div>
                <div class="col-md-2 col-md-offset-3">
                    <span class="input-group-btn">
                        <span class="icon-input-btn">
                            <span class="glyphicon glyphicon-repeat"></span>
                            <input type="reset" class="form-control btn btn-default" value="Reset" />
                        </span>
                    </span>
                </div>
            </div>
        </form>
    </div>
</body>

Phone 2/Text area form-group

First form-group of address block

CSS 

td,
th{
    text-align: left;
}
.nav-tabs{
    margin-bottom: 20px;
}
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs > li > a{
    color: black;
    border-top-color: #ccc;
    border-right-color: #ccc;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-color: #ccc;
    border-bottom-color: transparent;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year{
    color: white;
    background-color: black;
}
.navbar-inverse .navbar-nav > li > a {
  color: #fff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff;
  background-color: #6a6a6a;
}
.error{
    color: #c00;
    font-size: 125%;
}

.icon-input-btn{
    display: inline-block;
    position: relative;
}
.icon-input-btn input[type="submit"]{
    padding-left: 2em;
}
.icon-input-btn input[type="reset"]{
    padding-left: 2em;
}
.icon-input-btn .glyphicon{
    display: inline-block;
    position: absolute;
    left: 0.65em;
    top: 30%;
}
.tableheader{
    border-color: black;
    border-style: solid;
    border-width: 0 1px 0 1px;
    background-color: #D8D8D8;
    font-weight: bold
}
.glyphicon{
    top: 0px;
}
.form-horizontal .control-label{
    display: inline-block;
    vertical-align: middle;
    float: none;
    text-align: left;
    padding-top: 0px;
}
.form-horizontal .controls {
    display: inline-block;
    margin-left: 20px;
}

1 个答案:

答案 0 :(得分：0)

为了达到预期的效果，我使用了div的类地址，封闭了地址字段和位置：relative with top 

.address{
  position:relative;
  top:-205px;
}

http://codepen.io/nagasai/pen/NAaNkK

HTML：

<html>
<body>
    <?php require_once ("includes/php/header.php"); ?>
    <div class="container-fluid">
        <form id="newContact" action="newContact.php" method="POST" class="form-horizontal">
            <div class="form-group">
                <div class="col-md-1 col-md-offset-1">
                    <label class="control-label">
                        Vendor
                    </label>
                </div>
                <div class="col-md-2">
                    <select name="vendID" class="form-control">
                        <option disabled selected value=""> - select a vendor - </option>
                        <?php
                        $result = vendorDB::getInstance()->vendorList();
                        while ($row=  mysqli_fetch_array($result)):
                        ?>
                        <option value="<?php echo $row["VEND_ID"];?>"><?php echo $row["VEND_NAME"];?></option>
                        <?php
                        endwhile;
                        mysqli_free_result($result);
                        ?>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-1 col-md-offset-1">
                    <label class="control-label twoline-label">
                        First Name
                    </label>
                </div>
                <div class="col-md-2">
                    <input type="text" name="contFirst" class="form-control" />
                </div>
                <div class="col-md-1">
                    <label class="control-label twoline-label">
                        Last<br/>Name
                    </label>
                </div>
                <div class="col-md-2">
                    <input type="text" name="contLast" class="form-control" />
                </div>
                 <div class="col-md-1">
                    <label class="control-label twoline-label">
                        E-mail Address
                    </label>
                </div>
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="email" name="contEmail" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-1 col-md-offset-1">
                    <label class="control-label" style="padding-top: 7px">
                        Phone 1
                    </label>
                </div>
                <div class="col-md-2">
                    <div class="input-group">
                        <span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
                        <input type="text" name="contPhone1" class="form-control" placeholder="555-555-5555" />
                    </div>
                </div>
                <div class="col-md-1">
                    <select name="contPhone1Type" class="form-control">                        
                    </select>
                </div>
                <div class="col-md-1">
                    <label class="control-label">
                        Notes
                    </label>
                </div>

            </div>
            <div class="form-group">
                <div class="col-md-1 col-md-offset-1">
                    <label class="control-label" style="padding-top: 7px">
                        Phone 2
                    </label>
                </div>
                <div class="col-md-2">
                    <div class="input-group">
                        <span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
                        <input type="text" name="contPhone2" class="form-control" placeholder="555-555-5555" />
                    </div>
                </div>
                <div class="col-md-1" >
                    <select name="contPhone2Type" class="form-control">                        
                    </select>
                </div>
                <div class="col-md-6">
                    <textarea form="newContact" name="contNote" class="form-control" 
                              rows="11" style="resize: none" placeholder="(optional)"></textarea>
                </div>
            </div>
          <div class="address">
            <div class="form-group">
                <div class="col-md-4 col-md-offset-1">
                    <label class="control-label">
                        Address
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-md-offset-1">
                    <input type="text" name="contAddr1" class="form-control" />
                </div>

            </div>
            <div class="form-group">
                <div class="col-md-4 col-md-offset-1">
                    <input type="text" name="contAddr2" class="form-control" />
                </div>

            </div>
            <div class="form-group">
                <div class="col-md-2 col-md-offset-1">
                    <label class="control-label">
                        City
                    </label>
                </div>
                <div class="col-md-1">
                    <label class="control-label">
                        State
                    </label>
                </div>
                <div class="col-md-2">
                    <label class="control-label">
                        ZIP
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-2 col-md-offset-1">
                    <input type="text" name="contAddrCity" class="form-control" />
                </div>
                <div class="col-md-1">
                    <select name="contAddrState" class="form-control">

                    </select>
                </div>
                <div class="col-md-1">
                    <input type="text" name="contAddrZip" class="form-control" />
                </div>
            </div>
            <div class="form-group">

            </div>
            <div class="form-group">

            </div>
             <div class="form-group">
                <div class="col-md-2 col-md-offset-3">
                    <span class="icon-input-btn">
                        <span class="glyphicon glyphicon-ok"></span>
                        <input type="submit" class="form-control btn btn-primary" value="Save New Contact"/>
                    </span>
                </div>
            </div>
                <div class="col-md-2 col-md-offset-3">
                    <span class="input-group-btn">
                        <span class="icon-input-btn">
                            <span class="glyphicon glyphicon-repeat"></span>
                            <input type="reset" class="form-control btn btn-default" value="Reset" />
                        </span>
                    </span>
                </div>
            </div>
        </form>
    </div>
</body>

CSS：

td,
th{
    text-align: left;
}
.nav-tabs{
    margin-bottom: 20px;
}
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs > li > a{
    color: black;
    border-top-color: #ccc;
    border-right-color: #ccc;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-color: #ccc;
    border-bottom-color: transparent;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year{
    color: white;
    background-color: black;
}
.navbar-inverse .navbar-nav > li > a {
  color: #fff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff;
  background-color: #6a6a6a;
}
.error{
    color: #c00;
    font-size: 125%;
}

.icon-input-btn{
    display: inline-block;
    position: relative;
}
.icon-input-btn input[type="submit"]{
    padding-left: 2em;
}
.icon-input-btn input[type="reset"]{
    padding-left: 2em;
}
.icon-input-btn .glyphicon{
    display: inline-block;
    position: absolute;
    left: 0.65em;
    top: 30%;
}
.tableheader{
    border-color: black;
    border-style: solid;
    border-width: 0 1px 0 1px;
    background-color: #D8D8D8;
    font-weight: bold
}
.glyphicon{
    top: 0px;
}
.form-horizontal .control-label{
    display: inline-block;
    vertical-align: middle;
    float: none;
    text-align: left;
    padding-top: 0px;
}
.form-horizontal .controls {
    display: inline-block;
    margin-left: 20px;
}

.address{
  position:relative;
  top:-205px;
}

希望这适合你

相关问题
最新问题