我应该如何消除按钮收缩？答案

【问题标题】：how should i eliminate button shrinkage?我应该如何消除按钮收缩？
【发布时间】：2016-05-19 02:32:35
【问题描述】：

我正在寻找在一行中的输入字段周围显示按钮的正确方法，并避免（如果可能）使用“宽度”属性。我希望按钮和字段以固定的宽度和位置排列，即使值（用户从下拉列表中选择）发生变化

            <div class="row" style="margin-top: 30px;">             
                          <div class="col-md-3"></div>
                          <div class="col-md-6">                            
                                <form class="form-inline">
                                         <div class="form-group" style="padding-left: 40px;">

                                                <div class="dropdown">
                                                    <button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                  <i class="fa fa-map-marker" style="color:blue"></i> United States <span class="caret"></span>
                                                    </button>
                                                                <ul class="dropdown-menu columns">
                                                                    <li><a href="#"><strong>United States</strong></a></li>
                                                                    <li><a href="#">France</a></li>
                                                                    <li><a href="#">United Kingdom</a></li>
                                                                </ul>
                                                 </div>         
                                          </div>
                                          <div class="form-group">
                                            <div class="dropdown">
                                               <button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                              USD <span class="caret"></span>
                                                              </button>
                                                                <ul class="dropdown-menu columns">
                                                                    <li><a href="#"><strong>USD</strong></a></li>
                                                                    <li><a href="#">EUR</a></li>
                                                                </ul>
                                                </div>
                                          </div>
                                          <div class="form-group">
                                            <label for="amountnum"> </label>
                                            <input style="font-weight: bold;text-align: center" type="text" class="form-control input-lg" id="amountnum" placeholder="number" value="10">
                                          </div>
                                          <div class="form-group">
                                            <div class="dropdown">
                                               <button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                              1 month <span class="caret"></span>
                                                              </button>
                                                                <ul class="dropdown-menu columns">
                                                                    <li><a href="#">1 Weeks</a></li>
                                                                    <li><a href="#">2 Weeks</a></li>
                                                                    <li><a href="#"><strong>1 month</strong></a></li>
                                                                </ul>
                                                </div>
                                          </div>
                                </form>
                          </div>                
                          <div class="col-md-3"></div>
            </div>
</div>

jsfiddle：https://jsfiddle.net/drorm/k43kyfpw/

当屏幕打开时，缩小左侧窗格以查看按钮排列（而不是下降到单独的行）

欢迎提出建议

【问题讨论】：

给你的输入和按钮一个百分比宽度，而不是一个固定的像素宽度。

标签： css html twitter-bootstrap web

【解决方案1】：

添加以下 CSS 样式

.navbar-form,.form-inline {
  display: flex;
}

flex（或inline-flex）的使用是相当强大的。结合items上的cssflex属性来控制控件的增长和收缩。

谷歌“CSS flex”了解更多。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：