Question

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

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

当屏幕打开时，让左侧窗格变窄以查看按钮对齐（而不是下降到单独的行）

建议表示赞赏

Answer 1

添加以下CSS样式

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

使用flex（或inline-flex）非常强大。结合项目的css flex属性来控制控件的增长和缩小。

Google＆＃34; CSS flex＆＃34;更多。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

1 个答案: