为什么我的按钮出现在包含div之外？

Question

我有一个显示我的问题的fiddle here。您可能需要使“结果”象限更宽以显示问题。

我的引导程序布局中有几列，但我似乎无法将我的按钮设置为父div中的布局，它似乎总是重叠它：

起初我以为这是由于bootstrap中的列填充，但是我已经删除了，问题仍然存在。我显然缺少一些关于如何工作的基本信息，因此任何有关css帮助的指针都可能不会出错。

显然我必须链接到一些代码以包含一个小提琴的链接，所以这里有一些：

我的HTML是：

 <div class="col-md-3 col-lg-3 nopadding">
     <div class="definition-pallette">
          <div class="row nopadding">
                <div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div>
          </div>
     </div>
  </div>

并且在bootstrap默认值之上的附加css是：

.nopadding {
   padding-left: 0 !important;
   padding-right: 0 !important;
}

Answer 1

似乎是这里发生的一些事情。主要问题是你正在使用很多div和一类＆＃39; col＆＃39;在你的行内＆＃39; div的。要让他们开始表现，您需要定义col的大小。这可以解决您的大部分问题。例如，你有这个

的地方

<div class="row">
    <div class="col">Some content</div>
</div>

将其更改为

<div class="row">
     <div class="col-xs-12">Some content</div>
</div>

它开始表现。

由于你不需要，我也摆脱了你的.nopadding课程。

这是一个更新的小提琴 - http://jsfiddle.net/T4XY4/1/ - 它修复了右侧面板中的大部分内容，但我会将剩下的部分留给您。您可能想要在“＆＃39;行”中选择您真正想要的课程。 divs，为了简单起见，我只是在xs-12中丢了。

修改

Bootstrap文档确认，如果要嵌套列，则需要正确的col-*类 - http://getbootstrap.com/css/#grid-nesting

Answer 2

它由行类中的bootstraps边距引起的边距增加：0;你的无填充类会解决这个问题，但可能会导致其他地方或移动设备出现布局问题。

.row {
     margin-right: -15px;
     margin-left: -15px;
}