Question

我正在使用Font Awesome图标构建包含社交按钮的登录页面。在较大的设备上，按钮水平显示在彼此旁边，但是当我调整屏幕大小时，当它们对于列太宽时，最右边的按钮将包裹在其他两个按钮下面。我希望按钮垂直堆叠并展开以填充列的空间，而不是在下面放置一个放错位置的按钮。我尝试了一种使用媒体查询的方法，但它有点笨拙，我担心它不容易维护，所以我抓住了这个想法。

这是我到目前为止所拥有的：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-8">
    <div class="row">
      <button id="login" class="btn btn-default">Login</button>
      <button id="facebook" class="btn btn-default"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
      <button id="google" class="btn btn-default"><span class="fa fa-google fa-lg"></span> Google Login</button>
    </div>
  </div>
</div>

＆＃13;

有关如何解决此问题的任何建议吗？

Answer 1

您有两种选择。在我看来，媒体查询将是最干净的，但这里有选项：

1）添加媒体查询并定位一个可以添加到这些按钮的特殊类：

@media screen and (max-width: 768px){
    .loginBtns {
        width:100%;
        display:block;
        margin: 10px 0;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-8 col-xs-12">
        <div class="row">
          <button id="login" class="btn btn-default loginBtns">Login</button>
          <button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span>  Facebook Login</button>
          <button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span>  Google Login</button>
        </div>    
    </div>
</div>

2）复制按钮并将一个版本隐藏在小屏幕上，同时显示另一个版本。我不是重复代码的忠实粉丝所以我不推荐这个选项，但如果你不喜欢媒体查询，那么它可能是一个选择。

.loginBtns2 {
  width:100%;
  margin: 5px 0;
}

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-8 hidden-xs">
        <div class="row">
          <button id="login" class="btn btn-default loginBtns">Login</button>
          <button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span>  Facebook Login</button>
          <button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span>  Google Login</button>
        </div>    
    </div>
  <div class="col-xs-12 visible-xs">
    <div class="row">
      <button id="login" class="btn btn-default loginBtns2">Login</button>
    </div>
    <div class="row">
      <button id="facebook" class="btn btn-default loginBtns2"><span class="fa fa-facebook fa-lg"></span>  Facebook Login</button>
    </div>
    <div class="row">
      <button id="google" class="btn btn-default loginBtns2"><span class="fa fa-google fa-lg"></span>  Google Login</button>
    </div>  
 </div>

这是一个兼具两个选项的工作代码集： https://codepen.io/egerrard/pen/woVEJW

Answer 2

不确定这是否有用。但试试这个..

<div class="container">
    <div class="row text-center">
         <div class="col-md-6">
          <button id="login" class="btn btn-default">Login</button>
          <button id="facebook" class="btn btn-primary"><span class="fa fa-facebook fa-lg"></span>  Facebook Login</button>
          <button id="google" class="btn btn-danger"><span class="fa fa-google fa-lg"></span>  Google Login</button>
        </div>   
    </div>
</div>

Bootstrap 3：第一次包装后垂直堆叠按钮？

2 个答案: