居中Twitter的引导按钮 [英] Centering a Twitter Bootstrap button

问题描述

我正在与Twitter的引导一种形式，和我有一个非常困难的时候为中心的按钮。它包含与7以下跨度的div里是HTML，按钮是在最底层。关于如何中心这件事的任何建议？

 ＆LT; D​​IV CLASS =形式span7＆GT;
  ＆LT; D​​IV ID =GET-开始＆GT;
    ＆LT; D​​IV ID =形式，介绍＆GT;
      ＆LT;强＆GT;＆LT; H1大于1。入门：一些基本的＆LT; / H1＆GT;＆LT; / STRONG＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;窗​​体类=形横＆GT;
      ＆LT; D​​IV CLASS =控制组＆GT;
        ＆LT;标签类=控制标签为=inputSaving＆GT;什么是你节省＆LT;？/标签＆gt;
        ＆LT; D​​IV CLASS =控制＆GT;
          ＆LT;输入类=span4类型=文本ID =inputSaving占位符=例如游泳课，生日派对，大学基金等。＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =控制组＆GT;
        ＆LT;标签类=控制标签为=说明＆gt;添加一个简短描述＆LT; /标签＆gt;
        ＆LT; D​​IV CLASS =控制＆GT;
          ＆LT; TextArea类=span4ID =说明行=4占位=在你自己的话描述这个扑满储蓄目标＆GT;＆LT; / textarea的＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =控制组＆GT;
        ＆LT;标签类=控制标签为=categoryselect＆GT;选择一个类别＆LT; /标签＆gt;
        ＆LT; D​​IV CLASS =控制＆GT;
          ＆LT;选择类=span4ID =categoryselect＆GT;
            ＆LT;！ - 添加一些CSS和JS做一个占位符值 - ＆GT;
            ＆LT;期权价值=小猫＆GT;＆小猫LT; /选项＆GT;
            ＆LT;期权价值=键盘猫＆GT;键盘猫＆LT; /选项＆GT;
            ＆LT;期权价值=微博鸟＆GT; Twitter的鸟＆LT; /选项＆GT;
          ＆LT; /选择＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =控制组＆GT;
        ＆LT;标签类=控制标签为=imageselect＆GT;选择图像＆LT; /标签＆gt;
        ＆LT; D​​IV CLASS =控制span4＆GT;
          ＆LT; IMG SRC =piggyimage.pngID =imageselectALT =图像选择/＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =控制组＆GT;
        ＆LT;标签类=控制标签为=目标＆GT;您的储蓄目标＆LT; /标签＆gt;
        ＆LT; D​​IV CLASS =控制＆GT;
          ＆LT;输入类型=文本级=span4ID =目标占位符=$ 1337年＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
      ＆LT;按钮类=BTN BTN-大BTN-主要TYPE =按钮＆GT;提交＆LT; /按钮＆GT;
    ＆LT; /表及GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

引导有它自己的命名定心类的文本中心

＆LT; D​​IV CLASS =span7文本中心＆GT;＆LT; / DIV＆GT;

I'm making a form with Twitter Bootstrap, and am having a really difficult time centering the button. It's contained inside a div with a span of 7. Below is the HTML, and the button is at the very bottom. Any recommendations on how to center this thing?

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

解决方案

Bootstrap has it's own centering class named text-center.

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

这篇关于居中Twitter的引导按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！