html - Bootstrap 布局——div 未正确对齐

Question

所以我有一个使用 Bootstrap 3 的简单 HTML 布局。我有一个外部 div，其中包含两个内部 div。顶部内部 div 似乎比底部内部 div 更宽。因为两者都有背景颜色，所以我希望它们彼此的宽度相同。我正在努力实现这一目标。

请注意: 实际应用程序使用 Angular NG-REPEAT 构建内部 div，因此需要完全保留外部 div。这是定义 NG-REPEAT 的地方。

我已经发布了一个 JSFiddle 供您查看问题。灰色 div 需要与蓝色 div 的宽度相同。帮忙？

JSFiddle showing the problem

HTML代码:

<div class="col-sm-10 col-sm-offset-1 caselist">
   <div class="caselink-search">
     <span>
       <a href="#">Link1</a>
       <a href="#">Link2</a>
     </span>
   </div>
   <div class="case-info">
      Information goes here
   </div>
</div>

相关CSS代码:

.caselist {
    margin-top: 2px;
    background-color: #63a0d4;
    color: #fff;
    height: 3.0em;
    padding-top: 0.5em;
    vertical-align: middle;
}

.caselink-search {
    display: block;
    padding-top: 5px;
}

.case-info {
    padding:10px;
    margin-top: 7px;
    background-color: #f2f2f2;
    border: 1px solid #b3b3b3;
    color: #000;
}

Answer 1

如果你正在使用 bootstrap，你应该使用它的类，这样你就会有一个响应式设计

<div class="col-md-10 col-sm-offset-1 caselist">
   <div class="caselink-search col-md-10">
     <span>
       <a href="#">Link1</a>
       <a href="#">Link2</a>
     </span>
   </div>
   <div class="case-info col-md-10">
      Information goes here
   </div>
</div>

和 css

.caselist {
    margin-top: 2px;
    color: #fff;

   }

.caselink-search {
    display: block;
    padding-top: 5px;
    background-color: #63a0d4;
    padding:10px;
}

.case-info {
    padding:10px;
    background-color: #f2f2f2;
    border: 1px solid #b3b3b3;
    color: #000;
}

如果你想改变你的div的大小，你所要做的就是改变col-md-的数量？你有 12 种可能性 (1..12)。

可以看demo Here