Question

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

这很好用，直到我导入bootstrap.css，此时项目显示在不同的行上，就好像它们之间存在换行符一样。

我不确定如何＆＃34;覆盖＆＃34;任何造型引导程序正在应用。

请在下面看我的JS小提琴。我已经包含了bootstrap.min.css资源。

你可以看到文本输入字段和字符串＆＃34; m＆＃34;在每个单元格内分开。

删除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>

Answer 1

默认情况下twitter-bootstrap .form-control是块级元素，您需要将其设为inline-block元素。

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

<强> fiddle

Answer 2

或者在form-inline

中添加一个类td的div

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

Answer 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>

Answer 4

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

即可

希望它适合你

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

使用Bootstrap CSS时，HTML表格单元格内容正在换行

4 个答案: