Я несколько дней бьюсь над проблемой с сеткой начальной загрузки Twitter. У меня есть три ряда, каждый из которых имеет два столбца. Я не установил класс "без желобов", так как я хочу промежуток между ними. При нормальном размере экрана (средний и больший) они отображаются так, как должны. Если я уменьшу окно до размера мобильного телефона, столбцы будут располагаться так, как я ожидаю, - ожидаем горизонтальное смещение, которое, по-видимому, будет таким же количеством пикселей, что и желоба. Если я добавлю класс без желобов, то все выглядит отлично, смещения нет. Я приложил несколько скриншотов, чтобы визуализировать проблему:
Можете ли вы взглянуть на мой код HTML и CSS, если я допустил ошибку? Возможно, я не полностью понимаю концепцию - я очень новичок в начальной загрузке Twitter. Любая помощь будет оценена!
Заранее спасибо!
С наилучшими пожеланиями,
знак
HTML:
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" id="google-typography-font-css" href="//fonts.googleapis.com/css?family=Indie+Flower:normal" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title>...</title>
</head>
<body>
<h1 class="display-3" style="text-align: center;">Erfahrungsberichte</h1>
<hr style="margin-bottom: 60px"></hr>
<div class="row justify-content-md-center feedback-row">
<div class="col-md-auto">
<img src="20190119_Kathi_02_small.jpg">
</div>
<div class="col-6 feedback-box">
<div class="feedback-caption-odd">
<h2 class="feedback-name">
<span class="feedback-emphasize">...</span> ...
</h2>
...
</div>
</div>
<div class="row justify-content-md-center feedback-row">
<div class="col-6 feedback-box">
<div class="feedback-caption-even">
<h2 class="feedback-name">
<span class="feedback-emphasize">Jane</span> Doe
</h2>
...
</div>
</div>
<div class="col-md-auto">
<img src="frau_sport.jpg">
</div>
</div>
<div class="row justify-content-md-center feedback-row">
<div class="col-md-auto">
<img src="....jpg">
</div>
<div class="col-6 feedback-box">
<div class="feedback-caption-odd">
<h2 class="feedback-name">
<span class="feedback-emphasize">...</span> ...
</h2>
...
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</body>
</html>
CSS:
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.feedback-box {
min-width: 420px;
}
.feedback-row {
margin-top: 60px;
}
.feedback-caption-odd {
background-color: rgb(247, 247, 247);
height: 100%;
padding: 20px;
}
.feedback-caption-even {
background-color: #727ca1;
color: #fcffff;
height: 100%;
padding: 20px;
}
.feedback-name {
font-weight: bold;
margin-bottom: 20px;
}
.feedback-emphasize {
color: #dbaea1;
}