Question

我正在寻找并排形式的最佳方式。

我在响应式网格中完成了我的工作，因为我使用两个单独的表单标签，这显然不可行。

这是我到目前为止所提出的。

任何帮助将不胜感激。

<div class="section group">
<div class="col span_1_of_2">
    <div class="formwrap">
        <form method="post" action="contact.php">
            <input type="text" name="name" id="name" placeholder="Name" required />
            <input type="text" name="company" id="company" placeholder="Company"      required />
            <input type="text" name="email" id="email" placeholder="Email" required />
            <input type="text" name="phone" id="phone" placeholder="Phone Number" required />
            <p class="submit">
                <input id="submit" name="submit" type="submit" value="Send" />
            </p>
        </form>
    </div>
</div>
<div class="col span_1_of_2">
    <div class="formwrap">
        <form method="post" action="contact.php">
            <select name="new_or_upgrade" id="new_or_upgrade" placeholder="Type of website">
                <option value="Type">Type of website</option>
                <option value="normal">Normal</option>
                <option value="cms">Content Management Site</option>
                <option value="upgrade">E Commerce</option>
            </select>
            <textarea name="message" placeholder="Tell us about your project" required /></textarea>
        </form>
    </div>
</div>


    /*Form*/

    select{
        width:100%;
        padding:0.5em;
        border:1px solid #F2F2F2;
        margin-top: 0.5em;}

    .formwrap {
        margin: auto;
        max-width: 70em;
        padding: 0 0.5em;
    }

    .formwrap p {
        font-family: sans;
        font-weight: 100;
        font-size: 1em;
        margin: 0;


    }


    form {
        clear: both;
        float: left;
        width: 100%;
        margin: 0 auto;

    }



    input,
    textarea {
        padding: 10px;
        border: 1px solid #EFEFEF;
        width: 100%;
        color: #000;
        margin-top: 0.5em;
        border-radius:3px;
    }

    textarea {
        width: 100%;
        height: 150px;
        line-height: 18px;
    }

    input:focus,
    textarea:focus {
        border: 1px solid #21ABD3;
        transition: all 0.2s ease;
    }

    form label {
        margin-left: 1em;
        color: #000;
    }

    .submit input {
        background-color: #1D8FBB;
        width: 6em;
        color: #FFF;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
        border: none;
        float: left;
        transition: none;
        border-radius: 3px;
        font-family:opensans
    }

    .submit input:hover {
        background-color: #34A2CD;
        transition: all 0.2s ease;
    }

    .submit input:active {
        box-shadow: 0 0 3px rgba(51, 51, 51, 0.61) inset;
    }

/*  SECTIONS  */



.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */



.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1%;
}

.col:first-child {
    margin-left: 0;
}

/*  GROUPING  */



.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1; /* For IE 6/7 */
}

/*  GRID OF TWO  */



.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.5%;
}

/*  GO FULL WIDTH AT LESS THAN 600 PIXELS */

@media only screen and (max-width: 800px) {

.col {
    margin: 0;
}
}
 @media only screen and (max-width: 800px) {

.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 100%;
}
}


@media only screen and (max-width: 600px) {
    .block{
        padding:0.5em 1em}


}

Answer 1

有很多方法可以创建响应式布局。对我来说，我想使用Bootstrap。

http://jsfiddle.net/wrcuv/

以下是示例

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<div class="container">
    <form method="post" action="contact.php" class="form">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <input type="text" name="name" id="name" placeholder="Name" class="form-control" required />
                </div>
                <div class="form-group">
                    <input type="text" name="company" id="company" placeholder="Company" class="form-control" required />
                </div>
                <div class="form-group">
                    <input type="text" name="email" id="email" placeholder="Email" class="form-control" required />
                </div>
                <div class="form-group">
                    <input type="text" name="phone" id="phone" placeholder="Phone Number" class="form-control" required />
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <select name="new_or_upgrade" id="new_or_upgrade" class="form-control" placeholder="Type of website">
                        <option value="Type">Type of website</option>
                        <option value="normal">Normal</option>
                        <option value="cms">Content Management Site</option>
                        <option value="upgrade">E Commerce</option>
                    </select>
                </div>
                <div class="form-group">
                    <textarea name="message" placeholder="Tell us about your project" class="form-control" required /></textarea>
                </div>
            </div>
        </div>
        <div class="row text-center">
            <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary" />
        </div>
    </form>
</div>

如何创建响应式并排表单？

1 个答案: