Bootstrap中两个50%宽度div无法放入col的问题咨询

嘿，这个坑我以前也踩过！其实问题出在inline-block元素之间的空白字符上，听我给你仔细掰扯清楚：

为什么会出问题？ #

当你把两个display: inline-block的元素分开写（比如换行、加空格），浏览器会把它们之间的空白解析成一个普通空格（大概占4-5px宽度）。你设置每个div宽度是50%，加起来是100%，再加上这个空格的宽度，总宽度就超过了父容器的100%，第二个div自然就被挤到下一行了。

几种解决方案，任你选： #

1. 直接去掉元素间的空白 #

把两个div的标签紧挨着写，或者用注释吃掉中间的空白：

<!-- 写法1：标签连在一起 -->
<div style="width: 50%; height:20px; background-color: red;display: inline-block;"></div><div style="width: 50%; height:20px; background-color: red;display: inline-block;"></div>

<!-- 写法2：用注释填充空白 -->
<div style="width: 50%; height:20px; background-color: red;display: inline-block;"></div><!--
--><div style="width: 50%; height:20px; background-color: red;display: inline-block;"></div>

2. 给父容器设置font-size: 0 #

inline-block的空白本质是文字空格，给父容器把字体大小设为0就能消除这个空格；如果子元素有文字，再单独把字体大小设回来就行：

<div class="col-xs-12" style="background-color: black; font-size: 0;" >
  <div style="width: 50%; height:20px; background-color: red;display: inline-block; font-size: 14px;"></div>
  <div style="width: 50%; height:20px; background-color: red;display: inline-block; font-size: 14px;"></div>
</div>

3. 改用Flexbox布局 #

Flexbox天生就不会有inline-block的空白问题，布局还更灵活，直接给父容器加display: flex就行：

<div class="col-xs-12" style="background-color: black; display: flex;" >
  <div style="width: 50%; height:20px; background-color: red;"></div>
  <div style="width: 50%; height:20px; background-color: red;"></div>
</div>

4. 用Bootstrap自带的栅格（最推荐） #

既然用了Bootstrap，不如直接用它的栅格系统，不用自己写宽度和inline-block，记得去掉默认内边距避免宽度溢出：

<div class="container">
  <div class="row">
    <div class="col-xs-12" style="background-color: black;" >
      <div class="col-xs-6" style="height:20px; background-color: red; padding: 0;"></div>
      <div class="col-xs-6" style="height:20px; background-color: red; padding: 0;"></div>
    </div>
  </div>
</div>

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