我有一个在Bootstrap中设计的页面，并使用滚动条处理我的元素的溢出.
我使用的按钮被设计成有圆角，但当页面上有足够多的元素溢出到滚动条中时，圆角就消失了，而我所有的其他样式元素都保留了下来，按钮变成了乏味的矩形.这只是一个overflow-y: scroll的属性，还是我可以避免？以下是我的HTML:
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
<div class="d-flex justify-content-center">
<div class="text-center">
<h6 class="text-white-50 mb-2 mx-auto">Your Ordered Playlist:</h6>
<div class="scrol">
{%for i in rankings%}
<div class="row">
<input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist"/>
</div>
{%endfor%}
</div>
</div>
</div>
</div>
和我的相关css:
.scrol {
height: 400px;
overflow-y: scroll;
}
.align-items-center {
align-items: center !important;
}
.justify-content-center {
justify-content: center !important;
}
.btn {
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
--bs-btn-font-size: 1rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: #212529;
--bs-btn-bg: transparent;
--bs-btn-border-width: 1px;
--bs-btn-border-color: transparent;
--bs-btn-border-radius: 0.375rem;
--bs-btn-hover-border-color: transparent;
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
--bs-btn-disabled-opacity: 0.65;
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
font-family: var(--bs-btn-font-family);
font-size: var(--bs-btn-font-size);
font-weight: var(--bs-btn-font-weight);
line-height: var(--bs-btn-line-height);
color: var(--bs-btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color: var(--bs-btn-bg);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #64a19d;
--bs-btn-border-color: #64a19d;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #558985;
--bs-btn-hover-border-color: #50817e;
--bs-btn-focus-shadow-rgb: 123, 175, 172;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #50817e;
--bs-btn-active-border-color: #4b7976;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #64a19d;
--bs-btn-disabled-border-color: #64a19d;
}
我已经调整了按钮的宽度，并try 了overflow的不同方法.我也完全取消了滚动，因为我的按钮在我这样做的时候看起来很正常，但我不喜欢它在页面上占据的空间，所以我排除了这一选项.