将静态 <div> 放置在具有引导网格宽度的 <div> 旁边答案

【问题标题】：Place static <div> next to <div> with bootstrap grid width将静态 <div> 放置在具有引导网格宽度的 <div> 旁边
【发布时间】：2020-09-06 02:47:26
【问题描述】：

在我的网页上，左侧有一个静态宽度为 300 像素的 div 元素。在它旁边的右侧，我想通过使用带有 col-12 的 Bootstrap 网格来显示另一个具有动态、灵活宽度的元素（因为用户可以调整浏览器窗口的大小）。想象一下：

<div class="row">
  <div style="width:300px;"></div>
  <div class="col-12"></div>
</div>

带有 class="col-12" 的 div 应该紧挨着左边的 div，它们之间没有空格，并且它应该总是在窗口的右侧增长/弯曲。

不幸的是，它似乎不起作用，左侧元素有一个静态的 px-width，右侧有一个 col-12 的 flex 元素。第二个 div 总是在第一个 div 之下。你知道解决方案吗？提前致谢！

【问题讨论】：

您是否尝试将具有静态宽度的 div 放在容器外部并固定边距？
谢谢！这听起来是一个很好的解决方案。我现在尝试了你写的东西。它还没有工作，但我认为如果保证金问题得到解决，它会。在静态 div 中，我有一个 dev-extreme 的图表组件。我不明白为什么，但是在静态 div 的右侧，实际上有边距，扩展到窗口的右侧。所以第二个灵活的 div 仍然低于第一个 div。我不知道如何修复边距，因为当我期望使用 chrome 时，边距来自 svg 元素。不是 div 本身。你知道该怎么做，或者你说的固定边距是什么意思？谢谢

【解决方案1】：

尝试为行中的第二个 div 赋予类“col”。

<div class="row">
  <div style="width:300px;"></div>
  <div class="col"></div>
</div>

问候！

【讨论】：