html - 我如何在这个表单旁边保留一个 h1 标签和一个 p 标签？ ( Bootstrap )

Question

我有一个 form on my website .我正在尝试将文本放在它的右侧。所以像一个 h1 标签和一些段落，我已经试过了:

<div class="hero-unit">
        <h1 class="text-right">Header</h1>
        <form action="sent.php" method="post" title="contact" lang="en">
            <p>Your Name:</p> <div class="control-group">
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on">
                <i class="icon-user"></i>
              </span>
              <input class="span2" name="name" type="text">
            </div>
          </div>
        </div>

和

<div class="hero-unit">
        <h1 class="text-right" style="display: inline-block;">Header</h1>
        <form action="sent.php" method="post" title="contact" lang="en">
            <p>Your Name:</p> <div class="control-group">
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on">
                <i class="icon-user"></i>
              </span>
              <input class="span2" name="name" type="text">
            </div>
          </div>
        </div>

有人对我有什么建议吗？

Answer 1

您正在使用 Bootstrap , 所以你只需要添加一个 row类到容器，一个span4类到表单和一个新的<div>带文字和span8表格下方的类:

<div class="hero-unit" class="row">
  <form ... class="span4">
    ...
  </form>

  <div class="span8">
    <h2>On the Origin of Species</h2>
    <p>On the Origin of Species, published on 24 November 1859, is a work of scientific literature by Charles Darwin which is considered to be the foundation of evolutionary biology.</h2>
  </div>
</div>

当浏览器窗口足够宽时，文本会自动显示在右侧。

查看结果演示:http://jsbin.com/imiciv/1

有关 Bootstrap 网格系统的更多信息，请阅读文档:

http://twitter.github.com/bootstrap/scaffolding.html#gridSystem