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

Question

我正在尝试将光谱颜色选择器放入右侧的引导程序形式中。

频谱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
}