覆盖Twitter的引导少不能正常工作，增加新的东西不工作(Overwriting Twitter

Twitter的引导是彪轻松地建立在它之上。现在我遇到我解决不了问题。我结核病v工作。2.3.2。

在我自己的style.less文件，我包括TB：

@import "../bootstrap/less/bootstrap.less";

在原来的TB文件， forms.less ，这LESS可以发现：

// INPUT GROUPS
// ------------

// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
  display: inline-block;
  margin-bottom: @baseLineHeight / 2;
  vertical-align: middle;
  font-size: 0; // white space collapse hack
  white-space: nowrap; // Prevent span and input from separating

  .add-on {
    display: inline-block;
    width: auto;
    height: @baseLineHeight;
    min-width: 16px;
    padding: 4px 5px;
    font-size: @baseFontSize;
    font-weight: normal;
    line-height: @baseLineHeight;
    text-align: center;
    text-shadow: 0 1px 0 @white;
    background-color: @grayLighter;
    border: 1px solid #ccc;
  }
}

所以在我自己的样式表后的引导文件的@import之后，我特里结构改变背景颜色.add-on像这样的（应该成为粉红色的，而不是你在上面的代码中找到@grayLighter）：

.input-append,
.input-prepend {
    .add-on {
        color: blue;    
        background-color: pink;
    }
}

现在，我已经添加了颜色（蓝色）是工作！这不是重写值，因为.add-on在forms.less并没有指定任何颜色。但是，你可以看到它有一个背景色（@grayLighter），我要改变！你看，我指定这是粉红色的，但它不工作。我不明白这一点。有人可以帮我吗？

我在样式表像这样使用这些不太进一步下跌：

div {
    .input-prepend;
    .form-search .input-prepend;

    label {
        .input-prepend > .add-on;
    }
 }

正如你在下面的图片看到，粉红色的背景颜色是行不通的。

我检查在CSS的LESS输出的外观，并在那里写了我的问题也是如此。我挖的这个进一步，我越不明白，一个codepen例子确实显示出粉红色为背景，应该如何在我看来，在这里看到工作示例： http://codepen.io/willemsiebe/笔/ kvmic 。

.input-append .add-on,
.input-prepend .add-on {
  display: inline-block;
  width: auto;
  height: 24px;
  min-width: 16px;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  background-color: #eee;     // FIRST MENTION BG COLOR IN FORMS.LESS
  border: 1px solid #ccc;
}

.input-append .add-on,
.input-prepend .add-on {
  color: blue;
  background-color: pink;     // SECOND MENTION BG COLOR IN MY OWN LESS FILE
}

// THIS IS HOW I REFERRED IT AS YOU CAN SEE IN MY TOPIC! BUT WHY IS BG COLOR PINK SHOWING UP BEFORE BG COLOR OF FORMS.LESS?

#woocommerce_product_search-3 #searchform div label {
  color: blue;
  background-color: pink;   // WHY IS THIS SHOWING UP FIRST?
  display: inline-block;
  width: auto;
  height: 24px;
  min-width: 16px;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  background-color: #eee;       // WHY IS THIS SHOWING UP LAST?
  border: 1px solid #ccc;
  vertical-align: top;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  margin-right: -1px;
  margin-bottom: 0;
}

20-7-2014：好了，现在我真的很困惑！相反，在我自己的style.less直接覆盖它，我把相同的代码在不同的文件较小，并与@import进口的它，现在它的工作...但在CSS输出是完全一样的，只是从事实背景色PINK现在提到的最后一个！

.input-append .add-on,
.input-prepend .add-on {
  display: inline-block;
  width: auto;
  height: 24px;
  min-width: 16px;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  background-color: #eee;
  border: 1px solid #ccc;
}

.input-append .add-on,
.input-prepend .add-on {
  color: blue;
  background-color: pink;
}

#woocommerce_product_search-3 #searchform div label {
  display: inline-block;
  width: auto;
  height: 24px;
  min-width: 16px;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  background-color: #eee;
  border: 1px solid #ccc;
  vertical-align: top;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  margin-right: -1px;
  color: blue;
  background-color: pink;     // NOW IT'S MENTIONED LAST!
  margin-bottom: 0;
}

Twitter的引导是彪轻松地建立在它之上。

这是只针对混入真，也看到：自举3 LESS：如何处理自举的嵌套的规则？

在上混入（只有一个简单的类工作），你可以尝试使用代替:extend()伪类，请参阅： http://lesscss.org/features/#extend-feature-combining-styles-a-more-先进的mixin

风格你的HTML：

<form id="searchform">
<label>zoeken:</label>
<input type="text">
<input type="submit">
</form>

请尝试以下更少的代码：

@import "bootstrap.less";

#searchform {
&:extend(.input-prepend, input-append all);
margin-top:5px;
label {
&:extend(.input-prepend .add-on all);
color: blue;    
background-color: pink;
}
input[type="text"] {
&:extend(.input-prepend input all, .input-append input all);
border-radius: 0;
}
input[type="submit"] {
&:extend(button all,.btn all,.input-append .add-on all);
height:30px;
}    
}