Question

使用bootstrap在一行中显示td内容。我完成了old post以及google_search中的更多解决方案，但没有运气。

这是最少的HTML：

<td class="column-verticallineMiddle">
  <input type="text" class="form-control form-mediumItem" >
<span class="pull-right pull-top">Abc</span>
</td>

尝试过的课程没有成功 - 拉上右上拉，内嵌等。我希望文本Abc显示在文本字段的右侧。

以下是JsFiddle

@downvoters - 如果您有解决方案，请回答。然后做-1，我会很感激。否则您无权这样做。如果查询不清楚，请问我。

Answer 1

尝试替换这个..

<td class="column-verticallineMiddle" style="vertical-align:middle;">
      <div style="width:60%;float:left;" >
           <input type="text" class="form-control form-mediumItem"> 
      </div>
      <div style="width:30%; float:right;">
           <span class="pull-right pull-top">Abc</span>
      </div>
</td>

这是FIDDLE

Answer 2

我有一个有效的解决方案：

在div中创建td，并在其上使用此CSS：

.inline-td {
    display: flex;
}

以下是JSFiddle

Answer 3

如果您使用的是bootstrap，则可以使用官方文档中的内联表单。

<td class="column-verticallineMiddle form-inline" style="vertical-align:middle;">
    <input type="text" class="form-control form-mediumItem" style="width:60%;">
    <span>Abc</span>
</td>

只需添加form-inline并确定输入宽度，请参阅Jsfiddle此处。

Answer 4

也可以使用col-xs-8和col-xs-4来实现。

<td class="column-verticallineMiddle">
 <div class="row">
      <div class="col-xs-8">
          <input type="text" class="form-control form-mediumItem" />
      </div>
      <div class="col-xs-4">
          <span>Abc</span>
      </div>
 </div>
</td>

查看jsfiddle

td内容在一行引导程序中

4 个答案: