输入组插件内的单选按钮组答案

【问题标题】：Radio btn-group inside input-group-addon输入组插件内的单选按钮组
【发布时间】：2014-02-22 12:28:57
【问题描述】：

我想在 input-group-addon 中放置一个（2 按钮）radio btn-group。我遇到的麻烦是按钮不会保持在一条线上。

将元素保持在同一行的常见模式对我不起作用。

你知道我该如何解决这个问题吗？谢谢

这是 jsfiddle：http://jsfiddle.net/DTcHh/144/

<div id="filter_criteria_date">
<div class="input-group" style='margin-top:15px'> <span class="input-group-addon">
    <input type="checkbox">
    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-xs btn-primary">And</button>
      <button type="button" class="btn btn-xs btn-primary">Or</button>
    </div>
    </span>

    <input type="text" class="form-control filter_text" placeholder="Filter">
</div>

【问题讨论】：

为按钮的父级设置宽度？ .btn-group { width: 100px; }这是你的意思吗？ DEMO
甜蜜。这似乎可以解决问题。谢谢拉迪！
没问题，我创建了一个答案。你能接受吗？编码愉快！
是的，我会的。它说我必须等待 7 分钟...
工作演示 => jsfiddle.net/DTcHh/148

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

由于没有设置宽度，它们不会保持在一条线上。为按钮的父级设置宽度，它们将适合。

.btn-group { 
    width: 100px;
}

DEMO HERE

【讨论】：

【解决方案2】：

   .input-group-addon { width:auto; }

工作演示http://jsfiddle.net/DTcHh/148/

【讨论】：

感谢您的回答。这真的很优雅。你知道我如何在 input-group-addon 右侧输入文本以获取父 div 的其余部分（而不会使插件变宽）吗？
不明白你的意思，因为我假设从右侧输入文本对齐只是放置文本框 css 属性text-align:right;
对不起，如果我不清楚。我的意思是：文本输入字段是否有可能占据整个剩余宽度，以使插件保持相同的宽度？换句话说：我可以实现文本输入覆盖红色区域吗？ jsfiddle.net/DTcHh/150
感谢您的帮助。正如您在更新 jsfiddle 中看到的那样，input-group-addon 也扩展了一些。还不错，我只是想知道是否可以在不更改 input-group-addon 宽度的情况下拉伸文本输入。