web-dev-qa-db-ja.com

bootstrapのフォームの下にある中央ボタン

bootstrapに問題があります。 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>

htmlcssbuttontwitter-bootstrapcenter
11
Fastkowy

その<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

次のBootstrapドキュメントでform-actionsを探します。

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

22
Leniel Maccaferri

Bootstrap 3を使用すると、 'text-center'スタイリング属性を使用できます。

<div class="col-md-3 text-center"> 
  <button id="button" name="button" class="btn btn-primary">Press Me!</button> 
</div>
12
Karl Gjertsen

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

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/ を参照してください。

これは、正しいbootstrapこれを中心とするクラス、text-align: center;は、画像やブロックなどではなくテキスト用です。

1
user3257693

私はこのようにします<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>
1
Moncho Chavez

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>
1
Kevin Lynch

Bootstrapを使用する正しい方法は、オフセットクラスを使用することです。数学を使用して、左オフセットを決定します。例：モバイルではボタンを全幅で使用したいが、タブレット、デスクトップ、大きなデスクトップでは中央の1/3の幅にしたい。

したがって、12個の「ブートストラップ」列のうち、4個をオフセットに使用し、4個をボタンに使用し、4個は右側が空白になっています。

それが機能するかどうかを確認してください！

0
Mitch McCoy

これを完全に試してみてください：

<div class="button pull-left" style="padding-left:40%;" >
0
chitra

Bootstrap 4を使用している場合、これを試してください：

<div class="mx-auto text-center">
    <button id="button" name="button" class="btn btn-primary">Press Me!</button>
</div>
0
Reeya Grace

Bootstrapでは、クラス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>

[〜＃〜] demo [〜＃〜]

0
Legionar