0

サイトの簡単なランディング ページに取り組んでいますが、フォームが中央に配置されません。ここで見てみると、少し右にずれているのがわかります。フォームの周りにコンテナ div を追加して、margin:0 auto のブロックとして設定しようとしましたが、何も変わりません。また、 class="span6 offset 3" を設定して中央に揃えようとしましたが、その小さなオフセットはまだ残っています。他の div 内のすべての div が何らかのマージンを構築しているように感じますが、それを修正する方法がわかりません。ここに私のHTMLコードがあります:

<div class="row">
        <div class="span3"></div><!--/.span3-->
        <div class="span6">
            <div class="well span6" align="center">
                <form id="contact-form" name="contact-form" method="post" action="form-processing.php">
                    <input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
                    <input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
                    <input class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required><br>
                    <button type="submit" class="btn btn-primary" id="button">Submit</button>
                    <button type="reset" class="btn">Clear</button>
                </form>
            </div><!--/.well span6-->
        </div><!--/.span6-->
        <div class="span3"></div><!--/.span3-->
    </div><!--/.row-->

そして、これが私のブートストラップ以外の CSS コードです。

h1 {font-family: marvel, serif; color:#060; font-size:90px; -webkit-text-stroke: 1px white;}
h2 {font-family: marvel, serif; color:#CCC; font-size:50px; -webkit-text-stroke: 1px black;}
p {color:white; font-size:20px;}
body{
    padding: 40px;
    margin:0 auto;
    background-image: url(../img/background.jpg);
    background-repeat: repeat;
    background-position: center center;
}
.welcome {padding:30px 0 0 0;}
#Message {overflow:hidden;}
.well {margin:0 auto;}
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed}

何が問題なのか分かったら、パイか何かを焼いてあげましょう。ありがとう。

4

4 に答える 4

1

ブートストラップcssを編集するのではなく、上記のように独自のcssを含めることをお勧めします。中央に配置する特定のIDを作成し、機能するまでパディングします。ブートストラップcssが自分のcssに干渉して問題を引き起こしているようです。現在は機能しているので、重要だと思う場合は、将来変更を加えるときに自分のcssだけを覚えておいてください。最後に、ブートストラップページを開いておくと、ページにスパンと行を含める前に、スパンと行がどのように見えるかがわかります。

于 2013-01-23T03:24:48.547 に答える
1

これは私が入力した新しいコードです。これは前のものとほとんど同じですが、span6 クラスが省略されています。これですべてが完璧に揃いました。

<div class="row">
    <div class="span3"></div><!--/.span3-->
    <div class="well span6" align="center">
        <form id="contact-form" name="contact-form" method="post" action="form-processing.php">
            <input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
            <input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
            <textarea class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required></textarea><br>
            <button type="submit" class="btn btn-primary" id="button">Submit</button>
            <button type="reset" class="btn">Clear</button>
        </form>
    </div><!--/.well span6-->
    <div class="span3"></div><!--/.span3-->
 </div><!--/.row-->
于 2013-01-23T02:53:45.107 に答える
0

ブートストラップには「-offset-」クラスがあり、アイテムの整列に非常に役立ちます。たとえば、「col-md-12 col-md-offset-2」または span6 の場合は「col-lg-6 col-lg-offset-3」を使用できます。

于 2015-11-30T18:25:27.433 に答える
0

「well」クラスのパディングが、ブートストラップの span6 クラスに幅を追加しているようです。

「box-sizing: border-box;」を追加することで、ボックスのサイズ変更のルートを取ることができます。well クラスに追加するか、その特定の div をターゲットにして、幅を 570px (ブートストラップの span6 幅) から 532px (左右に 19px のパディング) に減らします。

それが役立つことを願っています。

于 2013-01-23T02:21:06.217 に答える