Столбцы не работают в Bootstrap 3 и 4 - PullRequest
0 голосов
/ 30 мая 2019

Я пытаюсь настроить новую внутреннюю веб-страницу, используя столбцы начальной загрузки (обе версии 3.3.6 и 4.0.0-alpha.6), но по какой-то причине они не отображаются в Internet Explorer 11 (компания-mandated).Вместо столбцов текст располагается вертикально (см. Примеры).

Я перепробовал все, от сложного кода до простого кода, который я прикрепил к этому вопросу.Ничего не сработало.Я также просмотрел каждую веб-страницу, которую смог найти на этом сайте, и аналогично ничего не помогло.Я также попытался использовать размеры столбцов 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-4

LG-3

LG-3

LG-3

переменная

переменная

переменная

Вместо:

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

переменная переменная переменная

Ответы [ 3 ]

0 голосов
/ 30 мая 2019

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

0 голосов
/ 06 июня 2019

Мальчик, у меня красное лицо ...

Я закрыл браузер, очистил кеш и вернулся обратно ... и все заработало.

Живи и учись ..извини за потраченное время ...

0 голосов
/ 30 мая 2019
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...