Question

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

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

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

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）。

您可以看到演示Here

Answer 2

尝试以下CSS：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 3

您添加到最外层div的引导类是添加您不想要的填充。删除col-sm-*类，您将失去额外的填充。此外，您在case-list类上有一个硬编码高度，这导致它不会随其内容扩展，从而使您看到内部div未对齐的外观。

Updated Fiddle

开发工具窗口中的计算标签是您的朋友，在这种情况下。另外，FYI，bootstrap会将各种自定义样式添加到表单输入等通用元素中，您可能想要也可能不想要。

Bootstrap布局 - div未正确对齐

3 个答案: