css 如何在Bootstrap列上共享边框？

h43kikqp 于 4个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(85)

我正在尝试创建一个Bootstrap容器，它有两个列。在较大的屏幕上，列应该水平并排，在较小的屏幕上，它们应该垂直堆叠。在列周围应该有一个1px的圆角边框。根据下面的模型图片：
two columns on large screens
two columns on small screens的
请注意，在大屏幕和小屏幕上，列的接触点仍然只有1px，并且没有圆角。
我现在的情况是

.custom-left-column {
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 15px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.custom-right-column {
  border: 1px solid #ccc;
  background-color: #e9ecef;
  padding: 15px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

个字符

css

来源：https://stackoverflow.com/questions/77748291/how-can-i-have-shared-borders-on-bootstrap-columns

1条答案

按热度按时间

l7mqbcuq1#

试试这个代码：

.custom-left-column, .custom-right-column {
  border: 1px solid #ccc;
  padding: 15px;
  text-align: center;
}

.custom-left-column {
  background-color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.custom-right-column {
  background-color: #e9ecef;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

@media screen and (max-width:768px) {
  .custom-left-column {
    border-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .custom-right-column {
    border-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}

个字符

赞(0）回复(0）举报 4个月前

我来回答

css 如何在Bootstrap列上共享边框？

1条答案

相关问题

热门标签

最新问答