css - 使用 Bootstrap 根据设备大小在元素上应用边框

Question

我正在使用 bootstrap 创建一个移动设备优先的响应式布局，并设置了各种行和列，我可以根据不同类别的屏幕尺寸进行调整。

我想知道是否有纯引导样式类允许我应用和删除不同尺寸的边框，而无需创建我自己的 css 媒体查询。

例如，如果我只想在一行中的第一列以中等大小 float 时才在第一列上有一个右边框...我知道这不是真正的代码，但是是否有与我相同的影响太笨了找不到？

<div class="row">
    <div class="col-12 col-md-6 border border-top-0 border-right-0 border-bottom-0 border-left-0 border-md-right-1">
        <p>Lorem ipsum</p>
    </div>
    <div class="col-12 col-md-6">
        <p>Dolor sit amet</p>
    </div>
</div>

我也在使用 maxcdn css，所以无法进入 sass。有什么建议吗？

Answer 1

Bootstrap 不支持开箱即用的响应式边框。您可以按照此处的说明在 Bootstrap 中使用响应式边框 - https://github.com/twbs/bootstrap/issues/23892#issuecomment-378172751

代码如下:

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .border#{$infix}-top {      border-top: $border-width solid $border-color !important; }
    .border#{$infix}-right {    border-right: $border-width solid $border-color !important; }
    .border#{$infix}-bottom {   border-bottom: $border-width solid $border-color !important; }
    .border#{$infix}-left {     border-left: $border-width solid $border-color !important; }

    .border#{$infix}-top-0 {    border-top: 0 !important; }
    .border#{$infix}-right-0 {  border-right: 0 !important; }
    .border#{$infix}-bottom-0 { border-bottom: 0 !important; }
    .border#{$infix}-left-0 {   border-left: 0 !important; }

    .border#{$infix}-x {
      border-left: $border-width solid $border-color !important;
      border-right: $border-width solid $border-color !important;
    }

    .border#{$infix}-y {
      border-top: $border-width solid $border-color !important;
      border-bottom: $border-width solid $border-color !important;
    }
  }
}