Question

我想混合使用Boostrap的.well和.button类。如果我尝试这样做，使用默认按钮：

<button type="button" class="btn btn-default well well-sm">Default-well</button>

对我来说太神奇了。但是，如果我尝试使用主按钮：

<button type="button" class="btn btn-primary well well-sm">Primary-well</button>

看起来有点奇怪。有没有人尝试这样做并且知道将非默认的Bootstrap按钮与.well类混合的解决方案？ JSFiddle就在这里：JSFiddle for well and Bootstrap buttons，你可以看到.btn-default看起来很不错但.btn-primary表现不好。

Answer 1

Wells并不是以这种方式使用，而是用于使用略微不同的背景颜色和一点填充来构建内容。

从twitter bootstrap中查看.well，你可以看到它实际上做了什么：

well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: @well-bg;
  border: 1px solid @well-border;
  border-radius: @border-radius-base;
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

// Sizes
.well-lg {
  padding: 24px;
  border-radius: @border-radius-large;
}
.well-sm {
  padding: 9px;
  border-radius: @border-radius-small;
}

如何混合Bootstrap .well和.button类？

1 个答案: