Проблемы с линиями и колоннами Bootstrap 4

По какой причине, если он состоит в том, что я размещаю больше линий и колонн в прямой части панели, которая у меня есть там, он не уважает мне вышеупомянутые линии и колонны и помещает все мне в единственную линию?

introducir la descripción de la imagen aquí

Все элементы, которые я помещаю независимо, которого agrege enciman в единственной линии и в единственной он вызывает, что он уважает мне правила bootstrap, он с первыми линиями и колоннами, которые я помещаю, следующие вызывают эту ошибку.

Код

Column 1
Column 1
Column 1

Jesus

Jesus

CSS

* {
    /*Variables*/
    --sideBar: #2f2e41;
    --fontFocus: #36d29e;
    --fontOn: #b1b1b1;
    --shadow: 0px 0px 23px -16px rgba(0, 0, 0, 0.8);
    --backgroundBet: rgb(224, 224, 224);
    --secondShadow: 4px 4px 10px -8px rgba(0, 0, 0, 0.6);
    --sideShadow: 7px 2px 24px -16px rgba(0, 0, 0, 0.75);
    --sideBar: #2f2e41;
}

.columna {
    margin-top: 2em;
    background-color: #ffffff;
    height: 80px;
    border-radius: 0.5em;
    box-shadow: var(--secondShadow);
    text-align: center;
    border: 1px solid #ebebeb;
}

.side {
    margin-top: 2em;
    height: 750px;
    border-radius: 0.5em;
    background-color: var(--backgroundBet);
    display: flex;
    justify-items: center;
}

.center-panel {
    margin-top: 2em;
    height: 750px;
    background-color: #ffffff;
    border-radius: 0.5em;
    box-shadow: 4px 4px 10px -8px rgba(0, 0, 0, 0.6);
}

.background {
    height: 750px;
    margin-top: 2em;
    margin-left: 5em;
    width: 50%;
    background-color: var(--backgroundBet);
    position: fixed;
    z-index: -1;
}

figure {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    margin-left: 25%;
    margin-top: 2em;
    overflow: hidden;
    border-radius: 100%;
    background-color: #fff;
}

img {
    width: auto;
    height: 100%;
}

-1
задан 06.11.2019, 04:04
1 ответ

Это пример как использовать колонны с bootstrap. Но был одиноким пример и они могут применяться многие другие без необходимости создавать или издавать персонализированный код. Все использованные классы первоначальные bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Prueba</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Prueba</h1>
  <div class="row">
    <div class="col-sm bg-light">
    <p class="p-4 border bg-white">
      One of three columns
      </p>
    </div>
    <div class="col-sm bg-light">
    <p class="p-4 border bg-white">
      One of three columns
      </p>
    </div>
    <div class="col-sm bg-light">
    <p class="p-4 border bg-white">
      One of three columns
      </p>
    </div>
  </div>

  <div class="row">
    <div class="col-sm bg-light">
    <p class="p-4 border bg-white">
      One of three columns
      </p>
    </div>
    <div class="col-sm bg-light">
    <p class="p-4 border bg-white">
      One of three columns
      </p>
    </div>
    <div class="col-sm bg-light">
    <p class="p-4 border bg-white">
      One of three columns
      </p>
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm bg-light">
    <p class="p-4 border bg-white">
      One of three columns
      </p>
    </div>
    <div class="col-sm bg-light">
    <p class="p-4 border bg-white">
      One of three columns
      </p>
    </div>
    <div class="col-sm bg-light">
    <p class="p-4 border bg-white">
      One of three columns
      </p>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Результат был бы чем-либо подобным:

introducir la descripción de la imagen aquí

Таким образом, было бы очень странным иметь ошибки. Но я вновь говорю, одинокий способ и есть многие другие, как могут быть изученными в bootstrap grids .

Надеялся, что это помогает тебе! Я обнимаю!

1
ответ дан 01.12.2019, 12:36

Теги

Похожие вопросы