12

ブートストラップに問題があります。使用してフォームとボタンを中央に配置span6 offset3しましたが、現在このフォームの下にボタンを中央に配置する方法がわかりません。私は試してみましtext-align: centerたが、それでも左側にあります。

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form>
                <input class="input-xxlarge" type="text" placeholder="Email..">
                <p style="line-height: 70px; text-align: center;"><button type="submit" class="btn">Confirm</button></p>
            </form>
        </div>
    </div>
</div>

4

11 に答える 11

23

そのタグを削除し、次のよう<p>にボタンを追加します。<div class="form-actions">

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

次に、CSS クラスを次のように拡張します。

.form-actions {
    margin: 0;
    background-color: transparent;
    text-align: center;
}

これが JS Bin のデモです: http://jsbin.com/ijozof/2

form-actionsここのBootstrapドキュメントを探してください：

http://twitter.github.io/bootstrap/base-css.html#buttons

于 2013-04-07T21:03:22.117 に答える
1

私はこのようにします<center></center>

<div class="form-actions">
            <center>
                    <button type="submit" class="submit btn btn-primary ">
                        Sign In <i class="icon-angle-right"></i>
                    </button>
            </center>
</div>
于 2015-08-11T16:57:38.227 に答える
1

このクラスを追加してみてください

class="pager"

<p class="pager" style="line-height: 70px;">
    <button type="submit" class="btn">Confirm</button>
</p>

<div class=pager><button etc etc></div> 私はうまくいった範囲内で私のものを試しました

http://getbootstrap.com/components/を参照してください。ページネーション -> ページャーの下を見てください。

これは、これを中央に配置するための正しいブートストラップ クラスのように見えtext-align: center;ます。画像やブロックなどではなく、テキストを対象としています。

于 2014-02-02T14:02:29.933 に答える
1

Width:100%私の経験でtext-align:centerはうまくいくでしょう

<p style="display:block; line-height: 70px; width:100%; text-align:center; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>
于 2013-04-07T21:11:09.903 に答える
0

Bootstrap を使用すると、単純に class を使用できますtext-center。

<div class="container">
    <div class="row">
        <form>
            <input class="input-xxlarge" type="text" placeholder="Email..">
        </form>

        <div class="text-center">
            <button type="submit" class="btn">Confirm</button>
        </div>
    </div>
</div>

デモ

于 2016-11-03T23:00:27.420 に答える
-1

あげてみて

デフォルトの幅。ブロックで表示し、マージンで中央揃え: 0 auto;

このような：

<p style="display:block; line-height: 70px; width:200px; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>
于 2013-04-07T21:02:41.907 に答える