bootstrap - 使用完整容器将多个按钮与大文本框对齐 space

Question

我想在 bootstrap 中创建一个文本框，它与您放置在面板中的文本框具有相同的外观和感觉（大圆角，完整 div 长度）。在这样一个文本框的右侧，我想有几个按钮。

我尝试了很多方法 - 要么正确对齐，要么文本框丢失所有样式。或者文本框看起来正确，但按钮换行到下一行！

我尝试过的一些方法：

<div class="row">
<div class='col-md-8'>  
  <input type="text" class="input-block-level input-lg" placeholder="Stuff 2">
  <button type="submit" class="btn">Save</button>
  <button type="submit" class="btn">Delete</button>
</div>
</div>

和...

<div class="input-group">
   <input type="text" class="form-control" placeholder="Stuff 2">
   <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
   </span>
</div>

和...

<div class="form-horizontal">
    <input type="text"/>
    <button class="btn">Sign up</button>
</div>

没有任何效果！我认为在文本框旁边放置一堆按钮应该不难，该文本框包含所有可用 space 并且又好又大:(

非常感谢任何帮助

Answer 1

据我所知，要组合文本框和按钮，我使用：

class="input-group"

并给所有文本框class="form-control"

你的意思是这样的：

<div class="row">
    <div class='col-md-8'> 
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Stuff 2">
          <span class="input-group-btn">
              <button type="submit" class="btn">Save</button>
              <button type="submit" class="btn">Delete</button>
          </span>
        </div>

        <div class="input-group">
           <input type="text" class="form-control" placeholder="Stuff 2">
           <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div>


        <div class="form-horizontal">
            <div class="input-group">
                <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn">Sign up</button>
                    </span>
            </div>
        </div>
</div>

如果是你的意思，下面是演示： Demo in jsFiddle

Answer 2

你就这样不行吗？

<div class="form-group">
    <div class="col-md-9">
        <input type="text" class="form-control" placeholder="Stuff2" />
    </div>
    <div class="col-md-3">
        <button class="btn btn-primary">Save</button>&nbsp;&nbsp;<button class="btn btn-danger">Delete</button>
    </div>
</div>

bootstrap - 使用完整容器将多个按钮与大文本框对齐 space

bootstrap - align multiple buttons with large textbox using full container space

html

css

twitter-bootstrap

twitter-bootstrap-3