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

Question

我有一个如下的输入组：

<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>

我需要最后一个按钮有一个固定的宽度，怎么做？

Answer 1

您可以使用 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
    }

如果您想将固定宽度应用于第二个按钮，那么它将是

.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
    }