Question

我正在编写一个程序，并使用Bootstrap来帮助我使用CSS。

我在选择下拉菜单时出现了一些问题，而h3标记出现在同一行。

目前它看起来像这样：

Imgur

目标： 我试图让它看起来像这样：

....转换自：[此处下拉框]

所以这一切都出现在同一行

HTML：

  <div class="row buttons">
    <div class="col-md-12 text-center">
      <div class="col-md-8 text-center col-centered ">
        <h3>Select your which number type you would like to convert <span>from</span>:</h3>
        <select class="form-control selectpicker show-tick" style="width: 100px;">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>

        <h3>Select your which number type you would like to convert <span>to</span>:</h3>
        <select class="form-control selectpicker show-tick" style="width: 100px;">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>

        <button type="button" class="binaryConversion selected">Convert from Binary</button>
      </div>

    </div>
  </div>

Answer 1

<H3>标记设置为display:block（Bootstrap还会通过其<select>类将display:block标记设置为.form-control。

默认情况下，某些元素设置为display:block，这意味着它们占据了屏幕的整行（因此没有任何元素本身就位于它们旁边）。

您可以将它们更改为display:inline-block，以使它们显示在同一行：

http://jsfiddle.net/61519vsz/

有关CSS display的更多信息，这里有几个有用的链接：

https://css-tricks.com/almanac/properties/d/display/

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 2

标题元素<h1>, <h2>,...是被阻止的元素。您需要将display值更改为inline-block。类似的东西：

h3 {
  display: inline-block;
}

这是一个供您查看的演示。 http://jsfiddle.net/yongchuc/c5gm2ufk/

Answer 3

尝试使用＆＃34; form-horizontal＆＃34;来自bootstrap的课程。 jsfiddle here。

<form class="form-horizontal">
  <label class="control-label"> Hello
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
</label>
</form>`

遇到Bootstrap问题并在同一行上对齐h3和选择选项

3 个答案: