Question

我正在尝试控制我的宽度，但是我遇到了一些麻烦。这是我的标记

<section class="bg-lb pt40 pb40 btborder">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="bg-white ">
                    <div class="pt40 pb40">
                        <a class="btn btn-default hvr-fade">Login</a>
                        <span id="cricle"><b>OR</b></span>
                        <a class="btn btn-default hvr-fade">Register</a>
                    </div>
                    <form>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon"><span class="ion-person"></span></div>
                                <input type="text" id="" class="form-control" placeholder="Username">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon"><span class="ion-android-lock"></span></div>
                                <input type="password" id="" class="form-control" placeholder="Password">
                            </div>
                        </div>
                        <a class="btn btn-default hvr-fade"><b>LOGIN</b></a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

我只是简单地尝试减小输入的宽度并使表单居中，在这里预览 http://plnkr.co/edit/RN6tPNCynK2lEdTeWmFQ?p=preview

Answer 1

如果您想继续使用网格系统，可以更改col-的设置方式。

变化：

<div class="row">
  <div class="col-sm-12">
    <div class="bg-white">
      <form>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><span class="ion-person"></span>
            </div>
            <input type="text" id="" class="form-control" placeholder="Username">
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><span class="ion-android-lock"></span>
            </div>
            <input type="password" id="" class="form-control" placeholder="Password">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

要：

<div class="row">
  <div class="bg-white">
    <form>
      <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><span class="ion-person"></span>
            </div>
            <input type="text" id="" class="form-control" placeholder="Username">
          </div>
        </div>
      </div>
      <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><span class="ion-android-lock"></span>
            </div>
            <input type="password" id="" class="form-control" placeholder="Password">
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

主要区别在于<div class="col-md-6 col-md-offset-3">现在专门包裹<div class="form-group">。 col-md-offset-3是您的表格中心的地方。

或者更进一步，为每个<div class="row">创建一个新的<div class="form-group">，而不是将所有列嵌入到一行中。

Answer 2

引导方式是减小表单所在列的宽度。使用3列可以使表单居中：

<div class="col-sm-3"></div>
<div class="col-sm-6">form comes here</div>
<div class="col-sm-3"></div>

http://plnkr.co/edit/DSroqJsfQBTuwBUgo3ps?p=preview

Answer 3

只需在特定位置覆盖bootstrap .css即可。试试这个：例如：

把它放在css中：

input.form-control{
  max-width: 100px;
}

input.form-control将覆盖每个input，其类设置为：form-control

或者您可以缩小整个container class

.container{
  max-width: 250px;
}

在此测试：http://plnkr.co/edit/kR69nCvsDCp9AlQqZztY?p=preview

如何使用bootstrap控制输入的宽度

3 个答案: