获取彼此相邻的 col-md-6 div答案

【问题标题】：Get col-md-6 divs next to each other获取彼此相邻的 col-md-6 div
【发布时间】：2017-09-18 20:03:49
【问题描述】：

由于我使用了两个 col-md-6 div，它们不应该彼此相邻对齐吗？我还将显示设置为 inline-block 并且两者的宽度都为 50%。

body, html {
  margin: 0 auto;
}

.col-md-6 {
  width: 50%;
  background-color: blue;
  height: 100px;
  display: inline-block;
}

<div class = "wrapper">
  <div class = "container">
    <div class = "row">
      <div class = "col-md-6">
      </div>
    </div>

    <div class = "row">
      <div class = "col-md-6">
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

【问题讨论】：

标签： html css

【解决方案1】：

尝试调整窗口大小，您会发现在更大的分辨率下，两个 div 实际上会彼此相邻。

如果您希望 div 在所有屏幕上彼此相邻，则应使用 col-xs-6

你不应该为每个 div 使用 row

.col-xs-6 {
  background-color: blue;
  height: 100px;
}
.col-xs-6:nth-of-type(even) {
  background-color: orange;
}

<div class = "wrapper">
  <div class = "container">
    <div class="row">
      <div class="col-xs-6">
      </div>
      <div class="col-xs-6">
      </div>
    </div>
  </div> 
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

【讨论】：

谢谢！我只是遵循 w3schools (w3schools.com/bootstrap/bootstrap_grid_system.asp) 上的 Bootstrap Grid 指南，但也许我误解了。我还认为使用 xs 仅适用于移动设备，因为它在 w3schools 指南上也这么说，所以感谢您澄清这一点！

【解决方案2】：

无需为每个网格类添加另一行。请检查更新的代码。

<div class = "wrapper">
    <div class = "container">
      <div class = "row">
        <div class = "col-md-6">
        </div>
        <div class = "col-md-6">
        </div>
      </div>
    </div> 
</div>

【讨论】：

【解决方案3】：

如果您希望两个 div 彼此相邻。将两个 div 保留在行内。如果您提供 col-md-6，则 css 将从 992px 开始，而 col-sm-6 将从 768px 开始.

body, html {
  margin: 0 auto;
}

.col-xs-6 {
  border-right: 2px solid red;
  background-color: blue;
  height: 100px;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "wrapper">
    <div class = "container">
      <div class = "row">
        <div class = "col-xs-6"></div>
        <div class = "col-xs-6"></div>
        </div>
      </div>
    </div>

【讨论】：

【解决方案4】：

这两个col-md-6 元素是row 元素的子元素，它们是块元素。要将两个元素彼此相邻对齐，您需要使用以下内容。您还应该删除 display:inline-block 并保留 float:left;，因为 inline-block 元素包含一个通常不需要的空间，这会导致您的第二个元素换行。

body, html {
  margin: 0 auto;
}

.col-md-6 {
  width: 50%;
  background-color: blue;
  height: 100px;
  float:left;
}

    <div class="wrapper">
      <div class="container">
        <div class="row">
          <div class="col-md-6"></div>
          <div class="col-md-6"></div>
        </div>
      </div>
    </div>

【讨论】：

【解决方案5】：

这是一件简单的事情，请不要再犯错。每 ROW 分为 COLUMNS（用 col 表示）

<div class = "wrapper">
    <div class = "container">
      <div class = "row">
        <div class = "col-md-6">
        </div>
        <div class = "col-md-6">
        </div>
      </div>
    </div> 
</div>

设置高度 = 自动；

【讨论】：

欢迎来到 SO Martin。这不是特别礼貌或有利于健康的氛围。我建议您阅读此内容并修改您的答案：stackoverflow.com/help/be-nice