獲取表格旁邊的

我一直在試圖讓我的表格旁邊有我的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>

來源

2016-02-04 DamianBreda

看起來它可以在bootstrap下正常工作，除了它們不會放在'xs'斷點旁邊。 – xpy

那麼這就是我的想法，但當我的屏幕上顯示它們顯示它們高於對方可能有什麼與代碼超過這個？ – DamianBreda

我們可以看到現場項目嗎？你確定包含Bootstrap CSS文件嗎？ – xpy

你的代碼似乎是正確的，但它可能會顯示以下文字因爲屏幕尺寸問題形式。嘗試與「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>

來源

2016-02-04 10:39:40 anurag

我仍然不知道爲什麼它不想工作，但我已經通過使用.footer {clear：both}解決了問題！ – DamianBreda

.row使用{clear：both;}。您可以遵循上述結構，因爲它不會將自己的樣式與引導混淆。謝謝 – anurag

獲取表格旁邊的

回答

相關問題