如何用Bootstrap在一个区块内水平排列两个区块？现有代码因margin失效

问题根源 #

原代码无法正常水平排列的原因：

• Bootstrap的col类默认带横向gutter（间距），且嵌套的col未被设为正确的Flex容器，导致子区块因宽度计算问题换行
• 要求仅使用height和border相关CSS，因此不能通过自定义样式修改margin/padding调整布局

可行代码方案 #

HTML结构调整

利用Bootstrap内置的Flex布局类，无需额外自定义非允许的CSS：

<div class="row">
    <div class="row1 col-lg-3 d-flex flex-nowrap">
       <div class="row2 col">子区块1</div>
       <div class="row2 col">子区块2</div>
    </div>
</div>

保留原CSS（仅使用允许的属性）

.row1, .row2{
    border: 1px solid black;
}
.row1{
    height: 150px;
}
.row2{
    height: 70px;
}

方案说明 #

• d-flex：将父容器row1设置为Flex容器，子元素默认水平排列
• flex-nowrap：强制子元素不换行，避免因gutter导致宽度溢出换行
• col：让两个子区块平分父容器的可用宽度（若需固定比例，可替换为col-lg-6，两个子区块各占父容器一半宽度）
• 所有自定义CSS仅使用了height和border属性，完全符合限制要求

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