Question

我在几天里一直在努力解决twitter bootstrap网格的问题。我有三行，每行有两列。我没有设置“ no-gutters”类，因为我想在它们之间留一个间隔。在正常的屏幕尺寸（中等或更大）下，它们将按应有的方式显示。如果我将窗口缩小到手机尺寸，则各列按我的预期排列-预期水平位移，这似乎与装订线的像素数量相同。如果我添加了无排水槽类，那么一切看起来都很完美，没有位移。我已经附上了一些屏幕快照以可视化问题：

如果我做错了什么，请您看看我的html和CSS代码？也许我不太了解这个概念-我是Twitter Bootstrap的新手。任何帮助将不胜感激！

谢谢！

最好的问候，标记

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;
}

Twitter Bootstrap网格和装订线的问题

0 个答案: