我目前正在将我的网站切换到Bootstrap 3.0.我在表单输入和文本格式设置方面有问题.在Bootstrap 2中起作用的东西在Bootstrap 3中不起作用.

如何在表单输入前后获得同一行上的文本?我已经将范围缩小到示例的Bootstrap3版本中的"form-control"类的问题.

我该如何将所有文本和输入放在一行中呢?我希望bootstrap3示例看起来像jsfiddle中的bootstrap2示例.

JS fiddle example

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

更新: 我将代码更改为此代码,可以正常工作,但现在对齐有问题.有什么主意吗?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

推荐答案

我会把你想要内联的每个元素放在你行中一个单独的col md-*div中.或者强制元素内联显示.表单控件类显示block,因为bootstrap认为应该这样做.

Html相关问答推荐

为移动显示重新排序内容

html列表顺序类型类似于子列表

我的表的第一列似乎是推其他2列到右边,我不能改变它

隐藏滚动条和禁用文本 Select 的CSS技术?

当表头包含特殊字符时,R Quarto发布的HTML表中不必要的大列宽

应用于文本而不是弹性容器的Flexbox属性

如何使用html和css关键帧创建动画

如何在网格中拥有离散的行

使用CSS Flexbox时,我的图像未对齐

浮动Div在CSS中未按预期工作

如何解决水平塌陷问题?

rvest: Select 不包含链接的段落(<;p>;)

如何使用 HTML 将对象数组发送到 Nodejs Express

使用 popover api 和 `

CSS 随着内容宽度的增加而减少填充

如何将 img 元素定位到特定位置?

在一行中对齐两个不同形式的按钮

如何在 Tailwind CSS 中创建响应式网格布局?

沿文本对齐双引号

让 Bootstrap 5 模式和背景占据父容器的宽度和高度,而不是全屏