Question

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

我下载了一个HTML代码段＆amp;将它添加到我的页面。这里是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>

Answer 2

我不得不在css部分进行一些更改。

.hril{
    background-color:#F9F9F9;
    height: 400px;
    margin-top: 5em;
    position: absolute;
    border-radius: 5px;;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    padding-top: 5em;

}

将高度更改为400px;这解决了按钮问题。

为输入文件元素添加了新样式。

input[type=file]
{
    width: 46%;
    font-weight: 400;
    padding: 10px;
    color: #A0A8B2;
    font-size: 14px;
    padding-left: 60px;
}

嗯......就是这样。解决了问题。

不正确的造型 - 输入元件的对齐问题＆amp;简单的html形式的按钮

2 个答案: