Question

我尝试在选择选项下拉菜单旁边添加提交按钮。我似乎无法在消息框上正确对齐。

它位于一个基本的div中，但并不认为它是必需的。

<form id="contact-form">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <h5>Join us now</h5>
                            <div class="form-group">
                                <label for="subject">
                                    Select Option</label>
                                <select id="subject" name="subject" class="form-control" required="required">
                                    <option value="na" selected="">Choose One:</option>
                                    <option value="service">Nutritional Support</option>
                                    <option value="suggestions">Nutritional Support and Exercise Pescription</option>
                                    <option value="product">Single Nutrition or Exercise Plan</option>
                                </select>
                            </div>

                            <label for="name">
                                Name</label>
                            <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
                        </div>
                        <div class="form-group">
                            <label for="email">
                                Email Address</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
                                </span>
                                <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
                        </div>

                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name">
                                Message</label>
                            <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
                                placeholder="Message"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-skin pull-right" id="btnContactUs">
                            Send Message</button>
                    </div>
                </div>
                </form>

Answer 1

我修改了代码中的行和列，您可以在此JSFiddle中找到它，希望这会有所帮助。

<form id="contact-form">
<div class="row">
    <div class="col-md-6 col-xs-6">
        <h5>Join us now</h5>
        <div class="row">
            <div class="col-md-6 col-xs-6">
                <div class="form-group">

                    <label for="subject">
                        Select Option
                    </label>

                    <select id="subject" name="subject" class="form-control" required="required">
                        <option value="na" selected="">Choose One:</option>
                        <option value="service">Nutritional Support</option>
                        <option value="suggestions">Nutritional Support and Exercise Pescription</option>
                        <option value="product">Single Nutrition or Exercise Plan</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6 col-xs-6">
                <div class="form-group">
                    <button type="submit" class="btn btn-skin pull-right buttonTest" id="btnContactUs">
                        Send Message
                    </button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-xs-6">
                <div class="form-group">
                    <label for="name">
                        Name
                    </label>
                    <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
                </div>

                <div class="form-group">
                    <label for="email">
                        Email Address
                    </label>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-envelope"></span>
                        </span>
                        <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xs-6">
                <div class="form-group">
                    <label for="name">
                        Message
                    </label>
                    <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
                              placeholder="Message"></textarea>
                </div>
            </div>

        </div>

    </div>
</div>

下拉列表旁边的HTML 5 / CSS按钮

1 个答案: