html - Bootstrap：为什么我的 col-md-6 不工作？

问题描述

我的网站有点问题。我想要一个响应式网站，使用 Bootstrap。在我的移动版本中，两列需要彼此重叠，现在是正确的。但是，在我的桌面版本中，这些列需要彼此相邻。我认为 col-md-6 是这样做的正确方法，但是出了点问题......谁能向我解释我做错了什么。？

body {
  padding: 0;
  margin: 0;
  background: #f2f6e9;
  padding-left: 20px;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.container {
  margin-top: 20px;
  font-family: 'Roboto', sans-serif;
}

.content {
  margin-top: 30px;
}

.tekstgeel{
  color: #d7a32d;
}

.tekstgroen{
  color: #4a7b45;
}

.bold {
  font-weight: bold;
}

.lijngeel{
  height:4px;
  width: 50px;
  background-color: #d7a32d;
  float: left;
  margin-top: 10px;
}

img {
  width: 100%;
}

.titel {
  font-size: 15px;
  text-transform: uppercase;
  line-height: 18px;
}

p {
  font-size: 12px;
}

#profielfoto {
  width: 75%;
  margin-top: 15px;
  margin-bottom: 40px;
}

.titel {
  font-size: 15px;
  text-transform: uppercase;
  line-height: 18px;
}

.ondertitel {
  font-size: 13px;
  text-transform: uppercase;
  line-height: 16px;
  margin-top: 15px;
  margin-bottom: 15px;
}

@media only screen and (min-device-width: 768px) {

.titel {
  font-size: 20px;
  line-height: 23px;
}

.col-md-6 {
  border:1px solid black;
}

}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Lotte Pothé</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</head>
<body>
  <div class="container">

      <div class="content">
               
        <div class="row">
          <div class="col-10 col-md-12">
            <div class="col-12 col-md-6">
            <h1 class="titel">Lotte Pothé<br>
            Jouw grafisch ontwerper<br>
             voor <span class="tekstgroen">digitaal en drukwerk</span></h1>
            <span class="lijngeel"></span><br>
            <h1 class="titel"><span class="tekstgeel">zakelijk en particulier</span></h1>
            <p>Wil jij je onderscheiden met jouw bedrijf.?<br> Ik ben namelijk gek van enthousiaste personen en plannen, dus ik luister graag naar jouw verhaal en wensen.! Ik sta open voor allerhande projecten, zowel groot als klein, dus bij twijfel contacteer mij gerust. Ben je geïnteresseerd in een samenwerking of heb je eerst nog enkele vragen.?
            </p>
            <a href="contact.html"> <p><span class="tekstgroen bold">Laat van je horen.!</span></p></a>
          </div>
          <div class="col-12 col-md-6">
            <img src="images/lotte.jpg" id="profielfoto" alt="Profielfoto Lotte Pothé">
          </div>
          </div>
        </div>
      </div>
    </div>
</body>
<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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>

我在 .col-md-6 周围放置了一个边框以显示它们的宽度。

标签： htmlresponsive-design

html - Bootstrap：为什么我的 col-md-6 不工作？

问题描述

解决方案

推荐阅读