Question

考虑下面的html代码，它使用bootstrap 3输入组来创建输入三个输入组。

<h1>border radius</h1>
<div class="col-md-3">
    <div class="input-group"> 
            <span class="input-group-addon">
                <input value="false" type="radio"/>
            </span>

             <div class="input-group"> 
                <span class="input-group-addon">*</span>
                <input type="text" class="form-control"/> 
                <span class="input-group-addon">?</span>
            </div>
    </div>
</div>

默认的bootstrap样式为所有输入组设置了边框半径，这对中间输入组来说并不好（我的意思是*周围的微小左半径）。

要删除此半径，我尝试将所有输入组的边框半径设置为零，除了最后一个。

 div.input-group > div.input-group > span.input-group-addon:not:last-child{
    border-radius: 0px !important;
}

但它不起作用！

请让我知道这个选择器有什么问题，如果我能做到更容易！小提琴：http://jsfiddle.net/mtamx8bs/

Answer 1

:not()是一个功能伪类，所以it needs parentheses around its argument：

div.input-group > div.input-group > span.input-group-addon:not(:last-child)

在该笔记中，我删除了!important，因为我已经修复了选择器，因此不再需要它。

Answer 2

由于Bootstrap将圆形边框样式应用于.input-group-addon类的方式，只有第一个和最后一个＆＃34; addon＆＃34;在.input-group内，最终会出现圆角。

基于此，我建议你考虑将所有必需的元素包装在一个输入组中，而不是试图将一个元素嵌套在另一个输入组中。

例如：

<div class="input-group">
    <span class="input-group-addon"><input value="false" type="radio"/></span>
    <span class="input-group-addon">*</span>
    <input type="text" class="form-control" /> 
    <span class="input-group-addon">?</span>
</div>

如果您想要使用这些更改，我已更新your fiddle。（编辑：或检查this one以获得更详细的版本，显示代码在多个组中看起来更清晰）

作为额外注意事项：在某些情况下，您最终可能会嵌套不同类型的＆＃34; group＆＃34;来自Bootstrap的课程，但是你可能需要和他们一起练习哪些组合才能达到你想要的效果。

文档中的

This page显示.input-group-btn类中的两个按钮元素（普通按钮和下拉按钮）的示例，它嵌套在.input-group内。

Bootstrap 3用于修复具有三个输入组的输入的边界半径

2 个答案: