在输入组旁边添加内联内容并让它们不包装

Question

我有一个用于执行用户查询的输入组。我想在输入组旁边有两个与输入对齐的锚点（但是它们用于其他功能）。我不希望他们去下一行，因为他们必须留在输入控件旁边。

Here is what it should always look like

输入和放大镜图标是输入组，电子邮件和保存图标是我想要的元素。我宁愿不使用列，因为我最终得到了12列粒度的额外空间，但我可以忍受它。

只要我缩小浏览器的尺寸，图标就会下拉到下一行。

无论我目前的实施情况如何，获得我想要的结果的最佳方法是什么（即我的输入组旁边的这两个图标，无论浏览器大小调整）？

以下是我目前正在做的事情：

＆＃13;

＆＃13;

// keeps the icons from floating up
.user-data-button-bar {
  padding-top: 7px;
  min-width: 90px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="input-group pull-left col-xs-11 col-md-11 col-lg-11">
  <input autocomplete="off" type="text" class="form-control">
  <span class="input-group-btn">
    <button type="submit" class="btn btn-default">
      <span class="glyphicon glyphicon-search"></span>
  </button>
  </span>
</div>

<div class="user-data-button-bar col-xs-1 col-md-1 col-lg-1">
  <span class="" ng-controller="UserDataButtonsController as vm">
    <a>
      <i class="glyphicon glyphicon-floppy-disk"></i>
    </a>
    <a>
      <i class="glyphicon glyphicon-envelope"></i>
    </a>
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用表格布局，因为input-group组件也已使用该格式。您可以使用或不使用列以及其他组件。

CSS示例

.user-data-button-bar {
    display: table;
    width: 100%;
}

.user-data-button-bar .user-data-button-controls {
    display: table-cell;
    vertical-align: middle;
    width: 80px;
}

.user-data-button-bar .user-data-button-controls span {
    display: table-cell;
    line-height: 2;
    padding-left: 22.5px;
}

工作示例：

body {
  padding-top: 10px;
}
.user-data-button-bar {
  background: #f4f4f4;
  display: table;
  width: 100%;
  margin-bottom: 20px;
  padding: 15px;
  border-top: 15px solid #337ab7;
}
.user-data-button-bar .user-data-button-controls {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
}
.user-data-button-bar .user-data-button-controls span {
  display: table-cell;
  line-height: 2;
  padding-left: 22.5px;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h3 class="text-center">0 Columns</h3>
<div class="user-data-button-bar">

    <div class="input-group">
        <input autocomplete="off" type="text" class="form-control">
        <span class="input-group-btn">
        <button type="submit" class="btn btn-default">
          <span class="glyphicon glyphicon-search"></span>
        </button>
        </span>
    </div>

    <div class="user-data-button-controls">
        <a href="#">
            <span class="glyphicon glyphicon-floppy-disk"></span>
        </a>
        <a href="#">
            <span class="glyphicon glyphicon-envelope"></span>
        </a>
    </div>

</div>

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title text-center">Inside a Panel</h3>
        </div>
        <div class="panel-body">
            <div class="user-data-button-bar">

                <div class="input-group">
                    <input autocomplete="off" type="text" class="form-control">
                    <span class="input-group-btn">
            <button type="submit" class="btn btn-default">
              <span class="glyphicon glyphicon-search"></span>
                    </button>
                    </span>
                </div>

                <div class="user-data-button-controls">
                    <a href="#">
                        <span class="glyphicon glyphicon-floppy-disk"></span>
                    </a>
                    <a href="#">
                        <span class="glyphicon glyphicon-envelope"></span>
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>


<div class="container">

    <div class="row">
        <h3 class="text-center">1 Column</h3>
        <div class="col-xs-12">
            <div class="user-data-button-bar">

                <div class="input-group">
                    <input autocomplete="off" type="text" class="form-control">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                          <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>

                <div class="user-data-button-controls">
                    <a href="#">
                        <span class="glyphicon glyphicon-floppy-disk"></span>
                    </a>
                    <a href="#">
                        <span class="glyphicon glyphicon-envelope"></span>
                    </a>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <h3 class="text-center">2 Columns</h3>
        <div class="col-sm-6">
            <div class="user-data-button-bar">

                <div class="input-group">
                    <input autocomplete="off" type="text" class="form-control">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                          <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>

                <div class="user-data-button-controls">
                    <a href="#">
                        <span class="glyphicon glyphicon-floppy-disk"></span>
                    </a>
                    <a href="#">
                        <span class="glyphicon glyphicon-envelope"></span>
                    </a>
                </div>

            </div>
        </div>
        <div class="col-sm-6">
            <div class="user-data-button-bar">

                <div class="input-group">
                    <input autocomplete="off" type="text" class="form-control">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                          <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>

                <div class="user-data-button-controls">
                    <a href="#">
                        <span class="glyphicon glyphicon-floppy-disk"></span>
                    </a>
                    <a href="#">
                        <span class="glyphicon glyphicon-envelope"></span>
                    </a>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <h3 class="text-center">3 Columns</h3>
        <div class="col-sm-4">
            <div class="user-data-button-bar">

                <div class="input-group">
                    <input autocomplete="off" type="text" class="form-control">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                          <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>

                <div class="user-data-button-controls">
                    <a href="#">
                        <span class="glyphicon glyphicon-floppy-disk"></span>
                    </a>
                    <a href="#">
                        <span class="glyphicon glyphicon-envelope"></span>
                    </a>
                </div>

            </div>
        </div>
        <div class="col-sm-4">
            <div class="user-data-button-bar">

                <div class="input-group">
                    <input autocomplete="off" type="text" class="form-control">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                          <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>

                <div class="user-data-button-controls">
                    <a href="#">
                        <span class="glyphicon glyphicon-floppy-disk"></span>
                    </a>
                    <a href="#">
                        <span class="glyphicon glyphicon-envelope"></span>
                    </a>
                </div>

            </div>
        </div>
        <div class="col-sm-4">
            <div class="user-data-button-bar">

                <div class="input-group">
                    <input autocomplete="off" type="text" class="form-control">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                          <span class="glyphicon glyphicon-search"></span>
                         </button>
                    </span>
                </div>

                <div class="user-data-button-controls">
                    <a href="#">
                        <span class="glyphicon glyphicon-floppy-disk"></span>
                    </a>
                    <a href="#">
                        <span class="glyphicon glyphicon-envelope"></span>
                    </a>
                </div>

            </div>
        </div>
    </div>

</div>