Question

我希望联系表格左对齐。但它总是在中心位置。我试了一个小时来调整这一点，现在我已经知道了。

我在这里上传了网站：

<body>

    <div class="col-lg-4 col-md-5 col-sm-12" style="font-size: 2em;background-color: white; color: #f97d04; padding-left: 10px; padding-top: 5px; padding-bottom: 0px; padding-right: 10px;">
        &gt;&gt; <a id="start" class="" href="./kontakt_files/kontakt.html">Startseite</a> / 
        <a id="referenzen" href="./kontakt_files/kontakt.html">Referenzen</a> / 
        <a href="./kontakt_files/kontakt.html" id="kontakt" class="active">Kontakt</a>
    </div>



    <div style="padding-top: 55px" class="col-lg-12 col-md-12 col-sm-12">
    </div>

    <div id="content">
<div style="background-image: url(&#39;kontaktbg.jpg&#39;);background-size: cover;">
<div class="container" style="">
    <div class="row">
        <div class="col-md-12">
                <form class="form-horizontal" method="post">
                    <fieldset>
                        <h1>Kontaktieren Sie webFuchs</h1>                    
                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
                            <div class="col-md-8">
                                <input id="lname" name="name" type="text" placeholder="Name" class="form-control" required="">
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
                            <div class="col-md-8">
                                <input id="email" name="email" type="text" placeholder="Email" class="form-control" required="">
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
                            <div class="col-md-8">
                                <input id="phone" name="phone" type="text" placeholder="Telefon" class="form-control" required="">
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
                            <div class="col-md-8">
                                <textarea class="form-control" id="message" name="message" placeholder="Geben Sie hier Ihre Nachricht an mich ein. Ich antworte innerhalb von zwei Tagen." rows="7"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-12 text-center">
                                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
    </div>
</div>
</div>
</div>

    <div id="footer" class="col-xs-12">
        <a href="./kontakt_files/kontakt.html" id="impressum">Impressum</a>
    </div>





</body>

谢谢！

Answer 1

罪魁祸首似乎是Bootstrap的.form-control类 - 其风格的一部分是将元素的宽度设置为100％。要更正此问题，请覆盖本地CSS中的样式（应在Bootstrap CSS文件之后引用）：

.form-control { width: 30%; }

......或任何适合您需求的价值。

Answer 2

引导类.container具有设置宽度（取决于屏幕大小）和自动边距（将内容放在中心）。您可以覆盖该类或不使用.container。我会覆盖容器（少工作）

在你的CSS中

#content .container{
    margin:2px;
}

请参阅： http://jsfiddle.net/uetc8ed4/4/

Answer 3

.container css具有以下内容：

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

将margin-left和margin-right设置为auto将导致元素水平居中。

Answer 4

在你的情况下，我认为css类form-horizontal的表单是左对齐的，而css class form-group中的div也是左对齐的。你使用了col-md-offset-x类的bootstrap，它给出了左侧的空间。

查看此Full view

Jsfiddle

Css 对按钮进行了更改

.text-adjust {
    text-align: left;
 }

更改水平形式以对齐左（引导程序）

4 个答案: