forms - 中心引导联系表

Question

我正在设置一个联系表单，我希望该表单位于我的页面的中央。但我不想要页面的全宽 (col-md-12)。我只想要页面中心的 col-md-6 的宽度。问题是因为我选择了 col-md-6，表单显示在页面的左侧。我怎样才能使它居中？

HTML:

<div class="container">
    <div class="row">
        <div class="col-md">
            <form action="contact" method="post"> {{--action = where the data must go--}}

                <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" class="form-control" id="name" placeholder="Your Name">
                </div>
                <div class="form-group">
                    <label for="email">Email address:</label>
                    <input type="email" class="form-control" id="email" placeholder="name@example.com">
                </div>
                <div class="form-group">
                    <label for="mobile">Mobile Nr:</label>
                    <input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
                </div>
                <div class="form-group">
                    <label for="message">Your message...</label>
                    <textarea class="form-control" id="message" rows="3"></textarea>
                </div>

            </form>
        </div>
    </div>
</div>

Answer 1

我看到的最简单的方法是在表单 div 的两侧添加两个带有 col-md-3 的分区，如下所示:

<div class="container">
<div class="row">
    <div class="col-md-3">
    </div>
    <div class="col-md-6">
        <form action="contact" method="post"> {{--action = where the data must go--}}

            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" class="form-control" id="name" placeholder="Your Name">
            </div>
            <div class="form-group">
                <label for="email">Email address:</label>
                <input type="email" class="form-control" id="email" placeholder="name@example.com">
            </div>
            <div class="form-group">
                <label for="mobile">Mobile Nr:</label>
                <input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
            </div>
            <div class="form-group">
                <label for="message">Your message...</label>
                <textarea class="form-control" id="message" rows="3"></textarea>
            </div>

        </form>
    </div>
    <div class="cold-md-3">
    </div>
</div>