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

Question

我的网站有点问题。我想要一个响应式网站，使用 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 周围加了边框以显示它们的宽度。

Answer 1

请在two div columns之间添加div row class。

<div class="row">
      <div class="col-md-12">
         <div class="row">
            <div class="col-sm-12 col-md-6">
           </div>
        </div>
     </div>
</div>

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

Bootstrap : Why is my col-md-6 not working?

html

responsive-design