Question

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

守则：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您的代码似乎是正确的，但由于屏幕尺寸问题，它可能会在文字下显示 表单。尝试使用＆＃34; col-xs - ＆＃34; ，因为它的通用性与所有屏幕尺寸无关。

您可以按照以下结构来制作表单和内容。

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

获取div旁边的表单

1 个答案: