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>
上如何处理这个有什么建议?
答
你有两种选择。在我看来,媒体的质疑将是最干净的,但这里的选项:
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
答
不知道这是否有帮助。但试试这个..
<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>
真棒,溶液1部作品!我在某一点有两个组合,但它有点古怪,如果我以后再回来的话,它会是头疼的。再次感谢 – slightlyoverwhelmed