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

【问题标题】：How to make Responsive button with Bootstrap如何使用 Bootstrap 制作响应式按钮
【发布时间】：2017-07-08 01:56:19
【问题描述】：

我正在尝试让提交按钮居中页面。我在 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>

我将提交按钮设置在桌面上，但此按钮不在移动设备的中心！我可以对移动设备中的居中按钮做什么？

【问题讨论】：

使用媒体查询developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
行后面必须跟列。此外，您可能在左右边距为 0 时弄乱了一些东西。要使按钮居中，请将其包装在 div 中，并使用 class="text-center"
你可以在这里摆弄吗
@yBrodsky 你的意思是我创建了一个带有 text-center 类的 div？margi-right 和 margin-left 在行 div 中
@ChandraShekhar 什么？

标签： html css twitter-bootstrap-3

【解决方案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*/
}

【讨论】：

不要为我工作

【解决方案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>

【讨论】：

【解决方案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 有实用类：text-right、text-center、text-left

【讨论】：

【解决方案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>

【讨论】：