根据引导程序的设备大小在元素上应用边框

问题描述 投票：0回答：7

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

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

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

<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。有什么建议吗？

css responsive-design media-queries border bootstrap-4
7个回答
26
投票

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;
    }
  }
}
15
投票

没有任何支持。但添加自己的代码可以解决这个问题。 基于@sharan 的回答（谢谢！）如果您想一次定义所有边框，我已经做了一些修改。 原文：https://stackoverflow.com/a/57089704/5677177

我的 SCSS 版本：

@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;
    }
    // support of .border-sm (-md, -lg, -xl)
    .border#{$infix} {
      border-top: $border-width solid $border-color !important;
      border-bottom: $border-width solid $border-color !important;
      border-left: $border-width solid $border-color !important;
      border-right: $border-width solid $border-color !important;
    }
    .border#{$infix}-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }
}

我的CSS版本，编译版本：

@media (min-width: 576px) {
  .border-sm-top {
    border-top: 1px solid #e3e7eb !important;
  }
  .border-sm-right {
    border-right: 1px solid #e3e7eb !important;
  }
  .border-sm-bottom {
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-sm-left {
    border-left: 1px solid #e3e7eb !important;
  }
  .border-sm-top-0 {
    border-top: 0 !important;
  }
  .border-sm-right-0 {
    border-right: 0 !important;
  }
  .border-sm-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-sm-left-0 {
    border-left: 0 !important;
  }
  .border-sm-x {
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-sm-y {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-sm {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-sm-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 768px) {
  .border-md-top {
    border-top: 1px solid #e3e7eb !important;
  }
  .border-md-right {
    border-right: 1px solid #e3e7eb !important;
  }
  .border-md-bottom {
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-md-left {
    border-left: 1px solid #e3e7eb !important;
  }
  .border-md-top-0 {
    border-top: 0 !important;
  }
  .border-md-right-0 {
    border-right: 0 !important;
  }
  .border-md-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-md-left-0 {
    border-left: 0 !important;
  }
  .border-md-x {
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-md-y {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-md {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-md-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 992px) {
  .border-lg-top {
    border-top: 1px solid #e3e7eb !important;
  }
  .border-lg-right {
    border-right: 1px solid #e3e7eb !important;
  }
  .border-lg-bottom {
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-lg-left {
    border-left: 1px solid #e3e7eb !important;
  }
  .border-lg-top-0 {
    border-top: 0 !important;
  }
  .border-lg-right-0 {
    border-right: 0 !important;
  }
  .border-lg-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-lg-left-0 {
    border-left: 0 !important;
  }
  .border-lg-x {
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-lg-y {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-lg {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-lg-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 1200px) {
  .border-xl-top {
    border-top: 1px solid #e3e7eb !important;
  }
  .border-xl-right {
    border-right: 1px solid #e3e7eb !important;
  }
  .border-xl-bottom {
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-xl-left {
    border-left: 1px solid #e3e7eb !important;
  }
  .border-xl-top-0 {
    border-top: 0 !important;
  }
  .border-xl-right-0 {
    border-right: 0 !important;
  }
  .border-xl-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-xl-left-0 {
    border-left: 0 !important;
  }
  .border-xl-x {
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-xl-y {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-xl {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-xl-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}
10
投票

在 Bootstrap5 中您可以修改实用程序： https://getbootstrap.com/docs/5.1/utilities/api/#enable-responsive

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, 
  (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
    "border-top": map-merge(
      map-get($utilities, "border-top"),
      ( responsive: true ),
    ),
    "border-end": map-merge(
      map-get($utilities, "border-end"),
      ( responsive: true ),
    ),
    "border-bottom": map-merge(
      map-get($utilities, "border-bottom"),
      ( responsive: true ),
    ),
    "border-start": map-merge(
      map-get($utilities, "border-start"),
      ( responsive: true ),
    ),
  )
);

编译后的CSS将是这样的：

  .border-sm {
    border: 1px solid #e9ecef !important;
  }

  .border-sm-0 {
    border: 0 !important;
  }

  .border-top-sm {
    border-top: 1px solid #e9ecef !important;
  }

  .border-top-sm-0 {
    border-top: 0 !important;
  }

  .border-end-sm {
    border-right: 1px solid #e9ecef !important;
  }

  .border-end-sm-0 {
    border-right: 0 !important;
  }

  .border-bottom-sm {
    border-bottom: 1px solid #e9ecef !important;
  }

  .border-bottom-sm-0 {
    border-bottom: 0 !important;
  }

  .border-start-sm {
    border-left: 1px solid #e9ecef !important;
  }

  .border-start-sm-0 {
    border-left: 0 !important;
  }

...continues...
2
投票

这是所有屏幕尺寸的CSS

@media (max-width: 575px) {
    .border-top {
        border-top: 1px solid #424242;
    }
    .border-left {
        border-left: 1px solid #424242;
    }
    .border-bottom {
        border-bottom: 1px solid #424242;
    }
    .border-right {
        border-right: 1px solid #424242;
    }
    .border-top-0 {
        border-top: none!important;
    }
    .border-left-0 {
        border-left: none!important;
    }
    .border-bottom-0 {
        border-bottom: none!important;
    }
    .border-right-0 {
        border-right: none!important;
    }
}

@media (min-width: 576px) {
    .border-sm-top {
        border-top: 1px solid #424242;
    }
    .border-sm-left {
        border-left: 1px solid #424242;
    }
    .border-sm-bottom {
        border-bottom: 1px solid #424242;
    }
    .border-sm-right {
        border-right: 1px solid #424242;
    }
    .border-sm-top-0 {
        border-top: none!important;
    }
    .border-sm-left-0 {
        border-left: none!important;
    }
    .border-sm-bottom-0 {
        border-bottom: none!important;
    }
    .border-sm-right-0 {
        border-right: none!important;
    }
}

@media (min-width: 768px) {
    .border-md-top {
        border-top: 1px solid #424242;
    }
    .border-md-left {
        border-left: 1px solid #424242;
    }
    .border-md-bottom {
        border-bottom: 1px solid #424242;
    }
    .border-md-right {
        border-right: 1px solid #424242;
    }
    .border-md-top-0 {
        border-top: none!important;
    }
    .border-md-left-0 {
        border-left: none!important;
    }
    .border-md-bottom-0 {
        border-bottom: none!important;
    }
    .border-md-right-0 {
        border-right: none!important;
    }
}

@media (min-width: 992px) {
    .border-lg-top {
        border-top: 1px solid #424242;
    }
    .border-lg-left {
        border-left: 1px solid #424242;
    }
    .border-lg-bottom {
        border-bottom: 1px solid #424242;
    }
    .border-lg-right {
        border-right: 1px solid #424242;
    }
    .border-lg-top-0 {
        border-top: none!important;
    }
    .border-lg-left-0 {
        border-left: none!important;
    }
    .border-lg-bottom-0 {
        border-bottom: none!important;
    }
    .border-lg-right-0 {
        border-right: none!important;
    }
}

@media (min-width: 1200px) {
    .border-xl-top {
        border-top: 1px solid #424242;
    }
    .border-xl-left {
        border-left: 1px solid #424242;
    }
    .border-xl-bottom {
        border-bottom: 1px solid #424242;
    }
    .border-xl-right {
        border-right: 1px solid #424242;
    }
    .border-xl-top-0 {
        border-top: none!important;
    }
    .border-xl-left-0 {
        border-left: none!important;
    }
    .border-xl-bottom-0 {
        border-bottom: none!important;
    }
    .border-xl-right-0 {
        border-right: none!important;
    }
}
0
投票

不，没有用于应用和删除边框的纯引导样式类。您必须创建自己的规则来覆盖它们。

0
投票

更新@Sharan 的精彩答案，这是 Bootstrap 5 的 SASS 版本（使用 [email protected] 和 [email protected] 进行测试）：

@use 'sass:map'

@import ~bootstrap/scss/functions
@import ~bootstrap/scss/variables
@import ~bootstrap/scss/maps
@import ~bootstrap/scss/mixins
@import ~bootstrap/scss/utilities
@import ~bootstrap/scss/utilities/api

$placements: (start: 'left', end: 'right', top: 'top', bottom: 'bottom')

@each $breakpoint in map.keys($grid-breakpoints)
  @include media-breakpoint-up($breakpoint)
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints)
    @each $placement-label, $placement-prop in $placements
      .border#{$infix}-#{$placement-label}
        border-#{$placement-prop}: $border-width solid $border-color !important

      .border#{$infix}-#{$placement-label}-0
        border-#{$placement-prop}: 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

// Rewrite and import bootstrap styles
@import ~bootstrap/scss/bootstrap
0
投票

由于您的问题没有明确禁止使用 JS 解决方案，因此为了完整性我添加了内容。下面是如何在 JS 中实现 border-start-md 类：

// add border-start-md without base bootstrap
const mediaQuery = window.matchMedia('(min-width: 768px)'); // twbs *-md
mediaQuery.addEventListener('change', e => {
    e.target.matches ?
        document.querySelectorAll('.border-start-sm')
            .classList.add('border-start') :
        document.querySelectorAll('.border-start-sm')
            .classList.remove('border-start');
});
let changeEvent = new Event('change');
mediaQuery.dispatchEvent(changeEvent);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.