Question

我正在尝试使用引导程序（版本3.3.6和4.0.0-alpha.6）列设置新的内部网页，但是由于某些原因它们没有显示在Internet Explorer 11中（公司-强制）。文本不是垂直排列，而是垂直堆叠（请参见示例）。

我已经尝试了从复杂代码到附加到此问题的简单代码的所有内容。没事。我也查看了在此上可以找到的每个网页，同样没有任何效果。我还尝试使用xs，sm，md，lg和xl列大小，它们没有任何区别。

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<title>Test 4</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
  <div class="col-lg-4">lg-4</div>
  <div class="col-lg-4">lg-4</div>
</div>
<div class="row">
  <div class="col-lg-3">lg-3</div>
  <div class="col-lg-3">lg-3</div>
  <div class="col-lg-3">lg-3</div>
</div>
<div class="container">
<div class="row">
  <div class="col-3">variable</div>
  <div class="col-3">variable</div>
  <div class="col-3">variable</div>
</div> 
</div>

上面的代码导致：

lg-4

lg-3

变量

代替：

lg-4 lg-4 lg-3 lg-3 lg-3

变量变量变量

Answer 1

Bootstrap Grid System在整个页面上允许12列。为了避免单独使用所有12列，我们可以根据需要将这些列拆分为子列。但是，我们需要确保子列总和最多为12，并且永远不会超过12，否则内容将切换到下一行。因此，请按照上述概念在代码中进行适当的更改，除了支持IE 11中的网格系统之外，还应考虑包含以下标记：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

为了进一步了解网格系统，请访问以下链接： https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Answer 2

男孩，我的脸红吗？

我关闭了浏览器，清除了缓存，然后返回...，它工作正常。

生活和学习...为所浪费的时间感到抱歉...

Answer 3

<div class="col-lg-12">
   <div class="row">
      <div class="col-lg-3">Column 1-a</div>
      <div class="col-lg-3">Column 1-b</div>
      <div class="col-lg-3">Column 1-b</div>
      <div class="col-lg-3">Column 1-b</div>
   </div>
</div>

列在Bootstrap 3和Bootstrap 4中均不起作用

3 个答案: