38

Twitter Bootstrapを使用してフォームを作成していますが、ボタンを中央に配置するのに非常に苦労しています。スパンが7のdiv内に含まれています。以下はHTMLで、ボタンは一番下にあります。これを中心に置く方法に関する推奨事項はありますか？

<div class="form span7">
  <div id="get-started">
    <div id="form-intro">
      <strong><h1>1. Get Started: Some basics</h1></strong>
    </div>
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="inputSaving">What are you saving for?</label>
        <div class="controls">
          <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="description">Add a short description</label>
        <div class="controls">
          <textarea class="span4" id="description" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="categoryselect">Choose a Category</label>
        <div class="controls">
          <select class="span4" id="categoryselect">
            <!-- Add some CSS and JS to make a placeholder value-->
            <option value="Kittens">Kittens</option>
            <option value="Keyboard Cat">Keyboard Cat</option>
            <option value="Twitter Bird">Twitter Bird</option>
          </select>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="imageselect">Choose an image</label>
        <div class="controls span4">
          <img src="piggyimage.png" id="imageselect" alt="image-select" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="goal">Your Saving Goal</label>
        <div class="controls">
          <input type="text" class="span4" id="goal" placeholder="$1337">
        </div>
      </div>
      <button class="btn btn-large btn-primary" type="button">Submit</button>
    </form>
  </div>
</div>
4

8 に答える 8

66

Bootstrap には、 text-centerという独自のセンタリング クラスがあります。

<div class="span7 text-center"></div>

于 2013-07-19T12:15:17.370 に答える
30

もう少しマークアップを気にしない場合は、次のようにします。

<div class="centered">
    <button class="btn btn-large btn-primary" type="button">Submit</button>
</div>

対応する CSS ルール:

.centered
{
    text-align:center;
}

クラスの CSS ルールを確認するbtn必要がありますが、幅が指定されていないと思うので、auto左右のマージンが機能しません。spanまたはinput-ルールのいずれかをボタンに追加すると、自動マージンが機能します。

編集：

私の最初の考えを確認しました。btnクラスには幅が定義されていないため、自動サイド マージンは使用できません。また、@AndrewMtext-centerが指摘しているように、新しいルールセットを作成する代わりに、単にクラスを使用することもできます。

于 2013-01-11T05:12:07.000 に答える
18

「text-center」クラスでスタイル設定された div でラップします。

于 2014-01-13T13:28:52.213 に答える
3 
.span7.btn { display: block;   margin-left: auto;   margin-right: auto; }

私はブートストラップに完全に精通しているわけではありませんが、上記のような方法でうまくいくはずです。すべてのクラスを含める必要はない場合があります。これにより、親である span7 内でボタンが中央に配置されます。

于 2013-01-11T05:03:41.300 に答える
1

ボタンが複数ある場合は、次の操作を実行できます。

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>
于 2015-08-15T04:06:33.320 に答える