如何将一个按钮放在与某些文本相同的行上？

Question

我正在使用引导程序3，并试图将某个按钮放在同一行上，但没有运气。我做了一个fiddle here。我错过了什么？非常感谢。

<div class="container"> 
<div class="col-xs-12 col-md-6 col-sm-8 col-lg-6 center-block"> 
<br> 
<p>Put the button on the same line as this text.</p> 

<span class="pull-right"> 
<button type="button" class="btn btn-default btn-small" name="submit" id="submit">+ Add Me</button></span> 
<br> 
</div> 
    </div> 

Answer 1

我做了一个轻微的改变你将按钮放在t上的代码他是同一条线。这是它看起来像现在 -

<div class="container"> 
 
    <div class="col-xs-12 col-md-6 col-sm-8 col-lg-6 center-block"> 
 
    <br> 
 
    <p>Put the button on the same line as this text. <span class="pull-right"> 
 
    <button type="button" class="btn btn-default btn-small" name="submit" id="submit">+ Add Me</button></span></p> 
 
    <br> 
 
    </div> 
 
    </div>

Answer 2

创建一个div包含您的按钮，然后pull-right它：

<div class="container"> 
    <span>Put the button on the same line as this text.</span> 
    <div class="pull-right"> 
    <div class="btn btn-small">+ Add Me</div> 
    </div> 
</div> 

Try it on JSFiddle.

Answer 3

试试这个

<div class="container"> 
<div class="col-xs-12 col-md-6 col-sm-8 col-lg-6 center-block"> 
<br> 
<p>Put the button on the same line as this text.</p> 

<span class="pull-right"> 
<button style =" margin-top:0px;" type="button" class="btn btn-default btn-small" name="submit" id="submit">+ Add Me</button></span> 
<br> 
</div> 
    </div>