Question

我无法在一条线上对齐Boostrap按钮和输入，让输入水平拉伸，同时依偎在按钮上。

以下是不同的尝试：

如果＃1：按钮组和输入组在同一列中。输入水平拉伸但在下一行抛出。

<h2>#1</h2>
        <div class="row">
            <div class="col-lg-12">

                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">Default</button>
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                </div>

                <div class="input-group">
                    <input type="text" class="form-control" aria-label="...">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-12 -->
        </div><!-- /.row -->

如果＃2：按钮组和输入组分为两列，但两者之间存在差距。

<h2>#2</h2>
    <div class="row">
        <div class="col-lg-6">

            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
            </div>
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="...">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                    </div><!-- /btn-group -->
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->

如果＃3：更多列被赋予输入组（比例3：9），但是按钮组的一半会被抛到下一行。

<h2>#3</h2>
    <div class="row">
        <div class="col-lg-3">

            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
            </div>
        </div><!-- /.col-lg-3 -->
        <div class="col-lg-9">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="...">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                </div><!-- /btn-group -->
            </div><!-- /input-group -->
        </div><!-- /.col-lg-9 -->
    </div><!-- /.row -->

如果＃4：按钮组和输入组在同一列中，则以换行形式包装。舒适的设置，但输入不再伸展。

<h2>#4</h2>
    <div class="row">
        <div class="col-lg-12">

            <form class="form-inline" role="form">
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">Default</button>
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                </div>

                <div class="input-group">
                    <input type="text" class="form-control" aria-label="...">
                        <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </form>
        </div><!-- /.col-lg-12 -->
    </div><!-- /.row -->

理想情况：按钮组和输入组共享与＃2相同的行，并且与＃4一样靠近。如果屏幕重新调整大小，我会期望输入首先拉伸，然后在线被抛出并且div被抛到下一行。

但我怎么能实现呢？我使用错误的表格/布局吗？或者是否必须修改CSS以创建新的布局？

Answer 1

使用flex让输入增长以占用剩余的可用空间：

.flex {
    display: flex;
}

input {
    flex-grow: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 flex">
    <button>button 1</button>
    <button>button 2</button>
    <button>button 3</button>
    <button>button 4</button>
    <input type="text">
    <button>button 5</button>
</div>

Answer 2

HTML（案例4）

<div class="row">
    <div class="col-lg-12">
        <form class="form-inline" role="form">
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
            </div>

            <div class="input-group">
                <input type="text" class="form-control" aria-label="...">
                    <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                </div><!-- /btn-group -->
            </div><!-- /input-group -->
        </form>
    </div><!-- /.col-lg-12 -->
</div><!-- /.row -->

使用bootstrap 3.0.2

附加CSS

.btn-group {
        display: inline !important;
}

Fiddle Example

使用Bootstrap 3.3.5

.btn-group {
        display: inline !important;
}
.form-inline .input-group {
    display: flex;
}
.form-inline .input-group .input-group-btn {
    display: flex;
}

Fiddle Example

Answer 3

您可能需要考虑这样的事情，或者它可能会让您到达您需要的地方，因为它需要考虑移动视口。

将页面打开到全宽并减少它。

＆＃13;

#myForm .group-change .form-control {
  border-radius: 0;
}
@media (max-width: 767px) {
  #myForm .group-change {
    text-align: center;
    display: inline;
  }
  #myForm .group-change .input-group-btn .btn {
    border-radius: 0;
  }
  #myForm .group-change .input-group-btn .btn-last {
    border-radius: 0;
    width: 100%;
  }
  #myForm .group-change .input-group-btn:last-child>.btn,
  .input-group-btn:last-child>.btn-group {
    z-index: 2;
    margin-left: 0px;
  }
  #myForm .group-change .dropdown-menu {
    width: 100%
  }
}
@media (max-width: 480px) {
  #myForm .group-change .input-group-btn>.btn+.btn {
    margin-left: 0px;
  }
  #myForm .group-change .btn {
    width: 100%;
    display: block;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container-fluid">
  <form id="myForm"> <span class="input-group group-change">
            <span class="input-group-btn" role="group" aria-label="...">
                <button type="button" class="btn btn-primary">Sample</button>
                <button type="button" class="btn btn-primary">Sample</button>
                <button type="button" class="btn btn-primary">Sample</button>
                <button type="button" class="btn btn-primary">Sample</button>
                <button type="button" class="btn btn-primary">Sample</button>
                <button type="button" class="btn btn-primary">Sample</button>
            </span>

    <input type="text" class="form-control" id="myInput" placeholder="Text"> <span class="input-group-btn" role="group" aria-label="...">
                <button class="btn btn-default btn-last dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Drop <span class="caret"></span>

    </button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">Action</a>

      </li>
    </ul>
    </span>
    </span>
  </form>
</div>
<hr>

＆＃13;

引导按钮和输入在一行输入拉伸以水平填充空间？

3 个答案: