css 当溢出到滚动条中时，Bootstrap Button样式会发生变化

我有一个用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;
}

型
我已经调整了按钮的宽度，并尝试了不同的overflow方法。我也完全摆脱了滚动，因为我这样做时，我的按钮看起来很正常，但不喜欢它在页面上占用多少空间，所以我排除了它作为一个选项。

按钮半径和样式仍然存在，但不可见，因为row的负边距，所以将container类添加到scrol容器中以抵消它，因为类row必须是container的子级（也可能更好地使用overflow-y: auto）。

<div class="container scrol">
    <div class="row">

字符串

原始代码 *：

<div class="container 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%}

型

注意事项：因为内容应该放在col中，所以可能会将input s Package 到col容器中，以确保没有进一步的样式副作用。

或者，根据布局，您可以从scrol子容器中删除row类，将其移动到某个父容器上，例如container后面的容器，然后您可以使用col s作为断点：

<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
    <div class="row 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">
                <div class="">

型
文档：

**空白是列的 Package 。**每列都有水平填充（称为gutter），用于控制它们之间的空间。然后，在具有负边距的行上抵消此填充，以确保列中的内容在视觉上向下对齐左侧。

网格系统
演示（将container添加到scrol）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<style>
  .scrol {
    height: 400px;
    overflow-y: auto;
  }
  
  .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;
  }
</style>



<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="container scrol">

        <div class="row">

          <input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
        </div>

        <div class="row">

          <input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
        </div>

        <div class="row">

          <input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
        </div>

        <div class="row">

          <input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
        </div>
        <div class="row">

          <input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
        </div>

        <div class="row">

          <input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
        </div>

        <div class="row">

          <input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
        </div>

        <div class="row">

          <input autocomplete="off" value="{{i}}" class="btn btn-primary mt-3 text-wrap" name="playlist" />
        </div>
      </div>
    </div>

  </div>
</div>

型

css 当溢出到滚动条中时，Bootstrap Button样式会发生变化

1条答案

相关问题

热门标签

最新问答