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>

Answer 2

尝试在col-md-6 div中添加“ m-auto”类。像这样：

<div class="container">
<div class="row">
    <div class="col-md-6 m-auto">
        <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 t`enter code here`ype="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>

中心引导联系表

2 个答案: