无法使标签与Bootstrap 3中的文本框对齐

时间:2016-05-07 08:26:12

标签: html css asp.net twitter-bootstrap-3

我正和朋友一起创建一个网站。目前我们正在创建一个联系页面,但我没有将标签与输入框对齐。

http://imgur.com/qan9PpG

我的ASP.net代码:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Contact</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageContent" runat="server">
    <div style="background-color: white; height: 750px;" class="container" id="contact-page">

        <label for="InputFullName">Full Name</label>
        <input type="text" class="form-control" id="InputFullName" placeholder="Full Name"/>


        <label for="InputEmail">Email address</label>
        <input type="email" class="form-control" id="InputEmai" placeholder="Example@example.com"/>


        <label for="InputSubject">Subject</label>
        <input type="text" class="form-control" id="InputSubject" placeholder="Subject"/>


        <label for="InputDescription">Description</label>
        <input type="text" class="form-control" id="InputDescription" placeholder="Description"/>

        <div class="form-actions">
        <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>

</asp:Content>

我链接到该页面的CSS文件:

/* Contact Page start */

#contact-page input {
    display: block;
    width: 450px;
    float: none;
    margin: 0 auto;
    background-color: white;
}

#contact-page .btn btn-default {
    float: none;
    margin: 0 auto;
}

#contact-page #InputDescription {
    height:250px
}

#contact-page label {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

/* Contact Page end */

我正在使用bootstrap 3。

1 个答案:

答案 0 :(得分:1)

您是否可以使用文本表单?

           <textarea name="message" rows="10" cols="30">
           Description
           </textarea>