html - chrome 不采用列的最大宽度 "col-lg-9"

标签 html css

chrome 没有采用“col-lg-3”和“col-lg-9”的最大宽度,而是采用 100% 的宽度。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<table class="col-12 form_one">
  <tr>
    <td class="col-lg-3 col-md-3 col-sm-3">
      <h4>Project Information</h4>
    </td>
    <td class="col-lg-9 col-sm-9 col-md-9">
      <h4>Project Text .....</h4>
    </td>
  <tr>
</table>
</body>

最佳答案

为什么要同时使用表格和网格系统?

我建议您使用表格(绝不会推荐用于布局目的)或具有更符合语义的元素的网格系统,例如:

<section class="row">
  <div class="col-lg-3 col-md-3 col-sm-3">
    <h4>Project Information</h4>
  </div>
  <div class="col-lg-9 col-sm-9 col-md-9">
    <h4>Project Text .....</h4>
  </div>
</section>

另请注意您是如何忘记将列包装在 .row 元素中的。

Codepen 上查看此内容

希望对您有所帮助:)

关于html - chrome 不采用列的最大宽度 "col-lg-9",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47234910/

相关文章:

css - 如何去除使用线性渐变属性时出现的条纹

javascript - 当另一个元素滚动时动态滚动另一个元素

html - CSS 样式方法

html - 网格元素未正确显示为 3 列?

html - href 悬停影响另一个 href

javascript - 在 React 组件上使用 CSSTransitionGroup 会出错

javascript - 本地 HTML 文件上的 IndexedDB

javascript - 动态定位弹窗 "windows"(div元素)

javascript - 使用 jQuery 提交 HTML 表单不起作用

html - 嵌套元素的 WCAG 可访问性问题