html - 在 div 旁边获取表单

Question

我一直在尝试将我的表单放在包含文本的 div 旁边。但是这两个不会站在一起我错过了什么吗？因为那里仍然站在彼此之上。我在不使用 bootstrap 的情况下进行了尝试，但仍然得到了相同的结果。

代码:

.footer-text {
  float: left !important;
  color: green;
}
.aanmelden {
  float: right !important;
  color: white;
}
.form-control {
  width: 66% !important;
}
input {
  margin-top: 5px;
  margin-bottom: 5px;
  display:inline-block;
  *display: inline;     /* for IE7*/
  zoom:1;              /* for IE7*/
  vertical-align:middle;
  margin-left:20px;
}
label {
  display:inline-block;
  *display: inline;     /* for IE7*/
  zoom:1;              /* for IE7*/
  float: left;
  padding-top: 5px;
  text-align: right;
  width: 140px;
  margin-right: 20px;
}

<div class="footer row">
  <div class="footer-text col-md-6">
    <h2>Agenda <br>
      waar en wanneer?</h2>

    <p>Zaterdag 6 / Zondag 7 September
      Locatie: nog niet bekend
      Aanwezig: 8.45uur</p>
    <p>Zaterdag 13 / Zondag 14 Oktober
      Locatie: nog niet bekend
      Aanwezig: 8.45uur</p>
    <p>Zaterdag 13 / Zondag 14 Oktober
      Locatie: nog niet bekend
      Aanwezig: 8.45uur</p>
  </div>
  <div class="aanmelden col-md-6">
    <form action="">
      <h3>INSCHRIJVEN <br>
        MELD JEZELF HIER AAN</h3>
      <div class="form-group">
        <label for="voornaam">Voornaam</label>
        <input type="text" name="voornaam" id="voornaam" placeholder="voornaam" class="form-control">
      </div>
      <div class="form-group">
        <label for="achternaam">Achternaam</label>
        <input type="text" name="achternaam" id="achternaam" placeholder="achternaam" class="form-control">
      </div>
      <div class="form-group">
        <label for="datum-cursus">Datum cursus</label>
        <input type="date" name="datum-cursus" id="datum-cursus" class="form-control">
      </div>
      <div class="form-group">
        <label for="opmerking">Opmerking</label>
        <textarea name="opmerking" id="opmerking" cols="30" rows="10" placeholder="Plaats hier uw opmerkingen!" class="form-control"></textarea>
      </div>
      <input type="submit" class="btn btn-primary">
    </form>
  </div>
</div>

Answer 1

您的代码似乎是正确的，但由于屏幕尺寸问题，它可能显示文本下方的表单。尝试对 "col-xs-" 进行同样的操作，因为它适用于所有屏幕尺寸。

您可以按照以下结构来放置您的表单和内容。

<div class="footer">
    <div class="row">
        <div class="col-xs-6">
            <div class="text-holder"> TEXT GOES HERE </div>
        </div>
        <div class="col-xs-6">
            <div class="form-holder"> FORM GOES HERE </div>
        </div>
    </div>
</div>