html - 样式不当 - 简单 html 表单中输入元素和按钮的对齐问题

Question

我正在尝试将新的联系表添加到我已经运行的网站中。

我下载了一个 HTML 片段并将其添加到我的页面。这里是downloaded code .

代码是使用 Bootstrap 框架构建的。看上去不错。但是当我将它应用到我的网站时，有些东西并不合适。上传元素被概述。它不会保持风格。并且按钮溢出了 div。

我想正确对齐它们。有帮助吗？？

风格:

.contact-info h4 {
    color: #8F99A4;
    font-size: 1.6em;
    font-weight: 300;
    margin-top: 10px;
}
.contact-info h3 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.6em;
    margin-top: 10px;
}
.contact-us {
    padding: 3em 0;
}

HTML

<div class="col-md-6 contact">
                    <div class="contact-info">
                        <h4>Contact Us</h4>
                        <h3>FOR MORE INFORMATION</h3>
                        <div class="hril">
                            <div class="rounded-1">
                                <a href="#"><img src="images/rounded-2.png" class="img-responsive" alt=""/></a>
                            </div>
                            <form action=""  id="contactus" method="post" enctype="multipart/form-data">
                            <input name="frmname" style="width: 80%" type="text" class="text" required="required" placeholder="Enter Your Full Name">
                            <input name="phonenumber" style="width: 40%" type="number" class="text" required="required" placeholder="Phone Number"/>
                            <input name="frmemail" type="email" style="width: 40%"  class="text" placeholder="Email Id" required/>
                            <textarea name="comments" style="width: 80%" required="required" placeholder="Comments & Questions"></textarea>
                            <div>
                                <input placeholder="resume" type="file" style="width: 80%">
                            </div>
                            <input name="submit_button" type="submit" value="SEND" />
                            </br>
                            </form>
                        </div>
                    </div>
                </div>

Answer 1

除了评论中的建议，对于表单，bootstrap 在这里有一个表单文档:Bootstrap form documentation .你应该尝试一些类似的东西(给它你自己的维度和标准):

<form class="form-horizontal">
  <div class="form-group">
    <label for="frmname" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input name="frmname" style="width: 80%" type="text" class="text" required="required" placeholder="Enter Your Full Name">
    </div>
  </div>

</form>