Question

由于我使用了两个col-md-6 div，它们是否应该彼此对齐？我还将显示设置为内联块，宽度均为50％。

＆＃13;

body, html {
  margin: 0 auto;
}

.col-md-6 {
  width: 50%;
  background-color: blue;
  height: 100px;
  display: inline-block;
}

＆＃13;

<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">

＆＃13;

Answer 1

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

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

你不应该为每个div使用行

df2['average_count'] = np.round(df2.groupby('name')\
                   ['count'].cumsum() / df2.date.dt.week).astype(int)  
df2

   name       date  count  average_count
0   AAA 2017-01-06      3              3
1   AAA 2017-01-13      2              2
2   AAA 2017-01-20      1              2
3   AAA 2017-01-27      8              4
4   BBB 2017-01-06      3              3
5   BBB 2017-01-13      1              2
6   BBB 2017-01-20      3              2
7   BBB 2017-01-27      3              2
8   CCC 2017-01-06      4              4
9   CCC 2017-01-13      5              4
10  CCC 2017-01-20      4              4
11  CCC 2017-01-27      5              4

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

Answer 2

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

＆＃13;

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

＆＃13;

Answer 3

如果你想要两个div在彼此的旁边。保持行内的两个div。如果你给col-md-6它将需要992px的css和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>

Answer 4

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

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>

Answer 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>

set height = auto;

col-md-6 divs彼此相邻

5 个答案: