如何设置Card百分比宽度？左右卡片70%/30%占比失效问题

看起来你遇到的核心问题是Bootstrap的栅格系统（col-lg-3、col-md-6这类预设类）和你自定义的宽度设置冲突了——Bootstrap的col类自带了基于12列布局的固定宽度规则，优先级会覆盖你直接设置的width属性（而且HTML里直接写width="500px"不是块级元素的标准用法，应该用内联样式style="width: xxx"）。

下面给你两种可行的解决方案：

方案一：基于Bootstrap栅格调整（近似70%/30%） #

Bootstrap栅格是12列布局，70%和30%没法完美对应整列数，但可以用最接近的col-lg-8（≈66.7%）和col-lg-4（≈33.3%）实现近似效果，代码示例：

<div class="row">
  <!-- 占约70%宽度的Card容器 -->
  <div class="col-lg-8 col-md-8">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title m-b-40">Company Name</h5>
        <h6 style='font-weight: bold;'>Company Overview</h6>
        <!-- 你的其他内容 -->
      </div>
    </div>
  </div>
  <!-- 占约30%宽度的Card容器 -->
  <div class="col-lg-4 col-md-4">
    <div class="card">
      <div class="card-body">
        <!-- 第二个Card的内容 -->
      </div>
    </div>
  </div>
</div>

方案二：自定义Flex布局（精确70%/30%） #

如果你需要严格的70%和30%宽度，可以放弃Bootstrap的col类，直接给row和Card容器设置Flex样式：

<div class="row" style="display: flex; gap: 1rem;"> <!-- gap用来设置Card间的间距 -->
  <!-- 占70%宽度的Card容器 -->
  <div style="flex: 0 0 70%;">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title m-b-40">Company Name</h5>
        <h6 style='font-weight: bold;'>Company Overview</h6>
        <!-- 你的其他内容 -->
      </div>
    </div>
  </div>
  <!-- 占30%宽度的Card容器 -->
  <div style="flex: 0 0 30%;">
    <div class="card">
      <div class="card-body">
        <!-- 第二个Card的内容 -->
      </div>
    </div>
  </div>
</div>

这里的flex: 0 0 70%意思是：不放大、不缩小、基础宽度固定为70%，能精准满足你的宽度需求。

额外小提醒 #

• 别在div标签里直接写width="500px"，这种写法是HTML旧属性，对块级元素的兼容性和样式优先级都不好，改用内联样式style="width: 500px;"会更稳妥。
• 如果想保留Bootstrap的响应式特性，可以结合媒体查询自定义类，比如：

@media (min-width: 992px) {
  .col-custom-70 {
    flex: 0 0 70%;
    max-width: 70%;
  }
  .col-custom-30 {
    flex: 0 0 30%;
    max-width: 30%;
  }
}

然后在HTML里用col-custom-70和col-custom-30替换原来的col类，这样大屏上是70/30布局，小屏还能单独设置适配规则。

内容的提问来源于stack exchange，提问作者arcade16