引导列布局，两列，一列固定宽度，另一列宽度，被响应式广告打破答案

【问题标题】：bootstrap column layout, two columns, one fixed width second rest of width, broken with a responsive ad引导列布局，两列，一列固定宽度，另一列宽度，被响应式广告打破
【发布时间】：2021-07-27 21:58:04
【问题描述】：

我有两列，一列是固定宽度 300px（右列），第二列是宽度的其余部分（左列）。通过 flex 完成它可以工作。问题是，一旦我将自适应广告放在左栏中，它会占用比可用空间更多的空间，可能是因为左栏没有确切的宽度，而右栏在内容下折叠。

<style>
.rcol {
    width: 300px;
}
</style>

<div class="row">
    <div class="col"></div>
    <div class="rcol d-none d-lg-block"></div>
</div>

如何解决？

一种可能的解决方案可以设置在左栏

width: calc(100% - 300px);

但这有点hacky。还有其他解决方案吗？

【问题讨论】：

你申请margin-right: 300px了吗？
@MaxiGui 没有帮助我现在尝试了
我给了 3 个选项

标签： css bootstrap-4

【解决方案1】：

3 个选项：

演示 1，左边栏有右边距
演示 2，左列带有最大宽度/宽度
演示 3，行上带有 padding-right

演示-1

.rcol {
  width: 300px;
  position:fixed;
  right:0;
  background-color:transparent;
  border-left:1px solid black,
  height:100vh;
}
.col:nth-of-type(1){
  background-color:red;
  height:200vh;
}

@media (min-width: 1200px){
  .col:nth-of-type(1){
     margin-right: 315px; /* 300px + padding 15px; */
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row mx-0">
    <div class="col"></div>
    <div class="rcol d-none d-lg-block">I am fixed</div>
</div>

演示-2

.rcol {
  width: 300px;
  position:fixed;
  right:0;
  background-color:transparent;
  border-left:3px solid black,
  height:100vh;
}
.col:nth-of-type(1){
  background-color:red;
  height:200vh;
}
@media (min-width: 1200px){
  .col:nth-of-type(1){
    max-width: calc(100% - 315px); /* 300px + padding 15px; */
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row mx-0">
    <div class="col"></div>
    <div class="rcol d-none d-lg-block">I am fixed</div>
</div>

演示-3

.rcol {
  width: 300px;
  position:fixed;
  right:0;
  background-color:transparent;
  border-left:1px solid black,
  height:100vh;
}
.col:nth-of-type(1){
  background-color:red;
  height:200vh;
}

@media (min-width: 1200px){
  .row-padding-300{
    padding-right: 300px;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row mx-0 row-padding-300">
    <div class="col"></div>
    <div class="rcol d-none d-lg-block">I am fixed</div>
</div>

【讨论】：

【解决方案2】：

似乎答案底部有所帮助。（把adsense的脚本放在页脚）

https://stackoverflow.com/a/50530706/4870273

【讨论】：