使用 Bootstrap CSS 时 HTML 表格单元格内容被换行答案

【问题标题】：HTML table cell contents are wrapping when using Bootstrap CSS使用 Bootstrap CSS 时 HTML 表格单元格内容被换行
【发布时间】：2017-07-12 14:21:50
【问题描述】：

在 HTML 表格单元格中，我有一个文本输入元素，后跟一些标准文本。我希望这两个项目都是内联的。

这工作正常，直到我导入 bootstrap.css，此时项目显示在单独的行上，就好像它们之间存在换行符一样。

我不确定如何“覆盖”正在应用的任何样式引导程序。

请看下面我的 JS Fiddle。我已经包含了 bootstrap.min.css 资源。

您可以看到文本输入字段和字符串“m”在每个单元格中位于不同的行上。

删除 Bootstrap.css 外部资源并再次按运行后，项目将内联。

如何覆盖 Bootstrap CSS 应用的任何样式？（我需要 Bootstrap CSS 来做其他事情）。

谢谢

https://jsfiddle.net/87tdupys/9/

<!--Desired: text input field plus text "m" inline. However, Bootstrap.min.css is causing the 2 items to display on separate lines. This can be shown by removing the external reference to bootstrap.min.css (in the left hand External Resources pane). How can I override this behaviour, and force the 2 items to be inline?-->

<table id='assetConfigLayoutTable' border='1px'>

  <tr>
    <td>
      <label>Capacity A</label>
    </td>
    <td style="width:200px">
      <input type="text" class="form-control" style="width:50px;"> m
    </td>

    <td>
      <label>Capacity B</label>
    </td>
    <td style="width:200px">
      <input type="text" class="form-control" style="width:50px"> m
    </td>
  </tr>

</table>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

twitter-bootstrap中默认.form-control是块级元素，你需要把它设为inline-block元素。

.form-control{
  display:inline-block;
}

fiddle

【讨论】：

【解决方案2】：

或者在td中放一个类form-inline的div

https://jsfiddle.net/87tdupys/7/

【讨论】：

【解决方案3】：

just take a new class name beside the form-control and put the below code in 
your css
<style>
 .text-display
  {
    display: inline-block !important;
  }
</style>
<table id='assetConfigLayoutTable' border='1px'>

<tr>
  <td>
    <label>Capacity A</label>
  </td>
  <td style="width:200px">
    <input type="text" class="form-control text-display" 
   style="width:50px;"> m
  </td>

  <td>
    <label>Capacity B</label>
  </td>
  <td style="width:200px">
    <input type="text" class="form-control text-display" style="width:50px"> 
    m
  </td>
 </tr>

</table>

【讨论】：

【解决方案4】：

只需在您的自定义 css 中放置一个重要的 !important，

希望对你有用

而且没有小提琴链接.....

【讨论】：