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

Posted 2023-03-06

技术标签:

【中文标题】使用引导程序根据设备大小在元素上应用边框【英文标题】：Applying borders on elements depending on device size with bootstrap 【发布时间】：2018-03-06 20:32:47 【问题描述】：

我正在使用 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。有什么建议吗？

【问题讨论】：

在此处查看我对类似问题的回答：***.com/questions/23583713 根据社区政策，我无法在此处复制我的答案，但您可以通过使用父容器的溢出隐藏属性来隐藏边框来实现这一点您不想在某些特定尺寸的屏幕上显示。 【参考方案1】：

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;

【讨论】：

~2 年后出现了一个不错的选择！我将它添加到我的代码库中并且它有效！【参考方案2】：

不支持它。但是添加自己的代码将解决它。基于@sharan 回答（谢谢！）如果您想一次定义所有边框，我已经进行了一些修改。原文：https://***.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;

【讨论】：

【参考方案3】：

在 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...

【讨论】：

非常好的解决方案。唯一的问题是它破坏了某些类，例如“border-dark”，因为断点的媒体查询比border-dark 类“更强”【参考方案4】：

这是所有屏幕尺寸的 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;

【讨论】：

【参考方案5】：

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

https://getbootstrap.com/

【讨论】：

免费链接是怎么回事？ OP 显然已经在使用 Bootstrap。

以上是关于使用引导程序根据设备大小在元素上应用边框的主要内容，如果未能解决你的问题，请参考以下文章

如何在引导 4 卡上添加边框

在组中的第一个 btn 上引导 CSS 边框半径

如何使整个表单（输入和提交按钮）在焦点上更改边框颜色（引导程序 3）

调整大小时的引导程序错误行为

使用引导程序从数据库中检索图像时自动定位图像

引导页脚旋转问题