光谱颜色选择器插件以引导形式

Question

我正试图将光谱颜色选择器变成右侧的引导形式。

Spectrum github：

https://github.com/bgrins/spectrum

它无法正常工作，正如在这个jsfiddle中可以看到的那样：

http://jsfiddle.net/b5gnupfn/

<div class="input-group">
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  <span class="input-group-addon" id="basic-addon1">
       <input type='text' class='my_color'/>
  </span>
</div>

编辑：

我只是希望它与.input-group中的其他.input-group-addon或.input-group-btn元素一样整齐地放入文本表单中。现在看起来很奇怪。

编辑：

修正了jsfiddle，现在关于这个问题是准确的。

Answer 1

一种可能的解决方案是将.input-group-addon更改为.input-group-btn并将.input-group-lg类添加到整个输入组。

<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
   <span class="input-group-btn" id="basic-addon1">
       <input type='text' class='my_color'/>
   </span>
</div> 

这是一个示例小提琴：http://jsfiddle.net/b5gnupfn/1/。我不确定这是否是你想要的，但它看起来有效。

Answer 2

更改sp-replacer的宽度，高度，使其等于bootstrap form-control，使其正确匹配。

答案：http://jsfiddle.net/94jcykcp/

.sp-replacer {
    width: 50px;
    height: 30px;
}

.form-control {
    height: 30px !important
}