Html 引导输入组，固定宽度按钮

我有一个输入组，如下所示：

<div class="input-group" style="width:100%;">           <div class="input-group-btn">               <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-primary" onclick="CaptureMapLocation('DependentRelation','0');" role="button"><i class="fa fa-map-marker"></i></a>           </div>           <div class="input-group-btn">               <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-search"></i></a>           </div>           <div class="input-group-btn">               <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-remove"></i></a>           </div>        </div>

---

我需要最后一个按钮具有固定的宽度，如何做到这一点？

您可以通过CSS实现这一点-以下内容将针对作为输入组最后一个子项的输入组按钮，并对其应用宽度

您应该将所有的内联样式移到一个单独的（外部）CSS表中，这将使代码更干净、更易于阅读

注意：以下内容将应用于页面中的所有输入组按钮，因此您可能希望将特定类或id应用于父输入组div

.input-group-btn:last-child {
  width: 100px; // or whatever your desired width is
}

您也可以使用flex来实现这一点

.input-group {
      display: flex;
    }

 .input-group-btn {
      flex-grow:1;
    }

.input-group-btn:last-child {
      flex-grow: 0;
      flex: shrink:0;
      flex-basis: 100px; // or whatever your desired width is
    }

如果要将固定witdh应用于第二个按钮，则

.input-group-btn:nth-child(2){
      width: 100px; // or whatever your desired width is
    }

最终，如果任何按钮可能受到影响，您可以创建一个“固定宽度类”，并将其应用于您希望受影响的按钮

.input-group-btn.fixed-width {
      width: 100px; // or whatever your desired width is
    }

---

如果我需要在中间的按钮上应用它，怎么做？我刚刚用第二个按钮stylnig更新了我的答案