Question

我似乎无法使用bootstrap将我的表单置于中心（我是初学者）。我已经阅读了一些不同的东西，但似乎没有一个对我有用。我希望它的中心大小相同。任何帮助将不胜感激！

这是html：

<div class="container">
  <div class="row">
    <form name="sentMessage" id="contactForm" novalidate>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
            <p class="help-block text-danger"></p>
          </div>
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
            <p class="help-block text-danger"></p>
          </div>
          <div class="form-group">
            <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
            <p class="help-block text-danger"></p>
          </div>
          <div class="form-group">
            <textarea rows="6" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
            <p class="help-block text-danger"></p>
          </div>
        </div>

        <div class="clearfix"></div>
        <div class="col-lg-12 text-center">
          <div id="success"></div>
          <button type="submit" class="btn btn-xl">Send Message</button>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 1

您可以通过添加一些额外的Bootstrap类来保持表单中心，这也将根据屏幕宽度保持设计的反应。

只需为您正在使用的每种尺寸添加一些偏移3类，并在排水后添加额外的sm和xs尺寸。无需额外的CSS。

FIDDLE

<强> HTML：

<div class="container">
    <div class="row">
        <form name="sentMessage" id="contactForm" novalidate>
            <div class="row">
                <div class="col-md-offset-3 col-sm-offset-3 col-xs-offset-3 col-md-6 col-sm-6 col-xs-6">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <textarea rows="6" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                    <div id="success"></div>
                    <button type="submit" class="btn btn-xl">Send Message</button>
                </div>
            </div>
        </form>
    </div>
</div>

Answer 2

这应该可以解决问题......首先，修复非常简单，我可以使用BootStrap＆＃34;帮助类＆＃34;和一个Bootstrap类编辑。

所以，有一个额外的行，所以我删除了它。我改变了你的＆＃34; col-md-6＆＃34;到＆＃34; col-md-12＆＃34;占据容器的整个宽度。为了弥补尺寸，我在＆＃34; form-group＆＃34;中添加了最大宽度。 class以及应用Bootstrap助手类＆＃34; center-block＆＃34;所有三个＆＃34; form-group＆＃34;类。

这解决了现在的问题。我不太确定在表单中使用段落标记是否可行，但这不是您的问题。

希望这会有所帮助......

FIDDLE HERE

<div class="container">
 <div class="row">
   <form name="sentMessage" id="contactForm" novalidate>
    <div class="col-md-12">
      <div class="form-group center-block">
        <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
         <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
        <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
        <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <textarea rows="6" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
        <p class="help-block text-danger"></p>
      </div>
    </div>

    <div class="clearfix"></div>
    <div class="col-lg-12 text-center">
      <div id="success"></div>
      <button type="submit" class="btn btn-xl">Send Message</button>
    </div>
  </div>
</form>

</div>

和CSS类编辑如：

.form-group {
 max-width: 300px;
}

或者，如果您不想覆盖Bootstrap类，您也可以创建自己的类......就像这样：

<div class="form-group center-block myclassname">
  <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
      <p class="help-block text-danger"></p>
</div>

然后在单独的样式表中创建CSS：

.myclassname {
   max-width: 300px;
}

无论哪种方式都可行。

Bootstrap中心表格

2 个答案: