我对彼此相邻的三个按钮的行为有疑问。当页面更改为较小的尺寸时,当我想要将它们垂直放置在这种情况下,即一个在另一个之上时,它们会继续保持该顺序。我怎么能解决这个问题?下面我附上部分 CSS 和按钮的代码。
.myButton {
box-shadow:inset 0px 1px 0px 0px #fff6af;
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background-color:#ffec64;
border-radius:6px;
border:1px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
}
.myButton:hover {
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
background-color:#ffab23;
}
.myButton:active {
position:relative;
top:1px;
}
.bouncy{
animation:bouncy 5s infinite linear;
position:relative;
}
.bouncy2{
animation:bouncy 3s infinite linear;
position:relative;
}
@keyframes bouncy {
0%{top:0em}
40%{top:0em}
43%{top:-0.9em}
46%{top:0em}
48%{top:-0.4em}
50%{top:0em}
100%{top:0em;}
}
.btn-group .btn {
width: 30%;
}
.btn-group {
width: 100%;
}
<div class="btn-group">
<button class="myButton btn-group btn">Boton1</button>
<button class="myButton bouncy2 btn-group btn">Boton2</button>
<button class="myButton btn-group btn">Boton3</button>
</div>
选项1
在这些情况下,最简单的事情是:
btn-group
给具有类 a 的主容器,display
其值为flex
flex-wrap
一个值wrap
来帮助我们,以便如果元素不在同一行中,那么它们将被发送到下一个:选项 2
对于每个按钮,我们根据其类别给出一个 33% 的百分比宽度
当按钮空间不够连续连续时,会在下一个重新排列,这就是我们通过媒体查询的方式指示断点的地方;也就是从什么尺度上进行调整
对于这个例子,我取了 700px 并告诉父容器:
这将是实现这一目标的一种方法:
我建议您使用 CSS 框架,这样您就不会重新发明轮子。在像 bootstrap 这样的框架中,它们具有基于屏幕大小的特殊断点类。我将文档留在这里和其他地方。
引导程序 v4.5
物化