如何用Bootstrap制作响应式按钮

Question

我正在尝试让提交按钮居中页面。我的html代码是：

<div class="container-fluid">
<div class="row" style="margin-right:0;margin-left:0">


<form method="POST"
      action="https://api.instagram.com/oauth/authorize/redirect_uri=http://hanie-asemi.ir/laravel/public/instagram/test&response_type=code">
    {{csrf_field()}}

    <button type="submit" class="btn btn-primary submit">Submit</button>
</form>
</div>

​

我在桌面给了提交按钮居中，但这个按钮不在移动端居中！我该如何处理移动端居中按钮？

Answer 1

为此，CSS应为

submit {
    display:block; /*setting the display to block(auto margin only work's on 
    this case)*/
    margin: auto; /*centering*/
    width: 8%; /*choosing the width*/
}

Answer 2

从Bootstrap 2.3.0开始，您可以使用.text-center，如下所示：

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" style="margin-right:0;margin-left:0">


    <form method="POST" action="https://api.instagram.com/oauth/authorize/redirect_uri=http://hanie-asemi.ir/laravel/public/instagram/test&response_type=code">
      {{csrf_field()}}

      <div class="row text-center">
        <button type="submit" class="btn btn-primary submit">Submit</button>
      </div>
    </form>
  </div>

​

Answer 3

我将扩展我的评论。这是正确的方式：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">

      <form method="POST">
        {{csrf_field()}}

      <div class="form-group text-center">
        <button type="submit" class="btn btn-primary submit">
          Submit
        </button>
      </div>
      </form>
    </div>
  </div>
</div>

在这里，您有一个工作正常的fiddle https://jsfiddle.net/en15xrh6/1/

row后面应该总是跟一些col-*类。接触row或col类的css，为了边距或填充，几乎总是以破坏引导而告终。为此，您必须转到bootstrap源代码并修改正确的变量。

最后，bootstrap具有实用程序类：text-right、text-center、text-left