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

我正在使用Font Awesome图标构建带有社交按钮的登录页面。在较大的设备上，按钮水平显示为彼此相邻，但当我调整屏幕大小时，最右边的按钮在列变得太宽时会覆盖在另外两个按钮下方。我希望按钮垂直堆叠并展开以填充列的空间，而不是在下面放置错位的按钮。我尝试了一种使用媒体查询的方法，但它有点不方便，我恐怕不容易维护，所以我抓住了这个想法。Bootstrap 3：在第一次包装之后垂直堆叠按钮？

这是我到目前为止有：

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

上如何处理这个有什么建议？

来源

2016-12-29 slightlyoverwhelmed

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

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>

这里是一个正在与这两个选项也codepen：根据需要 https://codepen.io/egerrard/pen/woVEJW

来源

2016-12-30 00:15:19

真棒，溶液1部作品！我在某一点有两个组合，但它有点古怪，如果我以后再回来的话，它会是头疼的。再次感谢 – slightlyoverwhelmed

不知道这是否有帮助。但试试这个..

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

来源

2016-12-30 00:12:25

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

回答

相关问题