如何将按钮放在bootstrap中的文本框附近？

Question

我已经有一行

<div class="row input_section">
    <div class="span3">
        <h3>Origin</h3>
        <p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
    </div>
    <div class="span9 delivery_section">
        <label><div>Address</div>
           <input type="text" name="type" value=""/>
        </label>
        <label>
            <button class="btn btn-primary"  type="button">Verify</button>
        </label>
        <label><div style="width:100%;height:150px;border:1px solid black;"></div></label>
    </div> 


</div>

我想在span9中完成div大小。 那么，我怎么写呢？

Answer 1

检查此jsFiddle

Bootstrap已经将类form-inline设置为内联。 在现有div中使用此附加此class="form-inline"

替换此行

 <div class="span9 delivery_section">

进入

 <div class="span9 delivery_section form-inline">

我已经使用过这个，希望这对你有帮助！

Answer 2

试试这个。

<div class="row input_section">
    <div class="span3">
        <h3>Origin</h3>
        <p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
    </div>
    <div class="span9 delivery_section">
        <label>Address</label>
        <div class="input-group">
            <input class="form-control" type="text" placeholder="Address">
            <div class="input-group-btn">
                <button class="btn btn-primary" type="button"> Verify </button>
            </div> 
        </div>
        <div style="width:100%;height:150px;border:1px solid black;"></div>
    </div> 
</div>

如果它似乎不起作用，可能是因为我使用了bootstrap 3。

Answer 3

直接来自bootstrap docs我的朋友

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

Answer 4

标签是内联元素。而且，在bootstrap中默认接受宽度，他们已将display属性指定为＆＃39; block＆＃39; 。只需通过放置以下代码覆盖代码即可。然后你将完成你的代码。

label {
  display:inline-block;
}