Проблема с сеткой начальной загрузки Twitter и желобами - PullRequest
0 голосов
/ 14 мая 2019

Я несколько дней бьюсь над проблемой с сеткой начальной загрузки 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>&nbsp;...
                </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>&nbsp;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>&nbsp;...
                    </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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...