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，如下所示：

＆＃13;

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

＆＃13;

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>

这里有一个工作小提琴https://jsfiddle.net/en15xrh6/1/

row后面应该跟一些col-*类。触及row或col类的CSS，对于边距或填充几乎总是会破坏引导程序。要做到这一点，你必须去bootstrap源并修改正确的变量。

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

Answer 4

纯CSS（flexbox）的解决方案：

用div包装你的按钮，添加一个名为centered的类，风格为：

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centered {
  display: flex;
  align-items: center;
  justify-content: 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="centered">
        <button type="submit" class="btn btn-primary submit">Submit</button>
      </div>
    </form>
  </div>

如何使用Bootstrap制作响应式按钮

4 个答案: