Question

我正在使用bootstrap 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

创建一个包含按钮的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 2

我对您的代码稍作修改，将按钮放在同一行。这是现在的样子 -

<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 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>

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

3 个答案: