2015-09-04 58 views
0

我已經使用bootstrap css創建了一個表單,並且我需要標籤與輸入字段內聯顯示,通常這是自動發生的,並且這次它沒有任何人可以幫忙嗎?Bootstrap表單輸入標籤需要內聯

<style> 

    #form-inpt{ 
     width: 200px; 
    } 

</style> 

<form> 

    <!-- Name and email --> 
    <label>Name</label><input id="form-inpt" class="form-control" type="text" name="name"> 
    <label>Email Address</label><input id="form-inpt" class="form-control" type="text" name="email"> 

    <!-- Business information --> 
    <label>Company Name</label><input id="form-inpt" class="form-control" type="text" name="CompanyName"> 
    <label>Company Phone Number</label><input id="form-inpt" class="form-control" type="text" name="CompanyPhone"> 
    <label>Address Line 1</label><input id="form-inpt" class="form-control" type="text" name="Address1"> 
    <label>Address Line 2</label><input id="form-inpt" class="form-control" type="text" name="Address2"> 
    <label>Address Line 3</label><input id="form-inpt" class="form-control" type="text" name="Address3"> 
    <label>Town</label><input id="form-inpt" class="form-control" type="text" name="Town"> 
    <label>County</label><input id="form-inpt" class="form-control" type="text" name="County"> 
    <label>Post Code</label><input id="form-inpt" class="form-control" type="text" name="PostCode"> 
    <label>Opening Hours</label><textarea id="form-inpt" class="form-control" name="OpeningHours"></textarea> 
    <label>Website</label><input id="form-inpt" class="form-control" type="text" name="Website"> 

    <!-- Google map coordinates --> 
    <label>Longitude</label><input id="form-inpt" class="form-control" type="text" name="Longitude"> 
    <label>Latitude</label><input id="form-inpt" class="form-control" type="text" name="Latitude"> 

    <!-- Anti spam --> 
    <label>Anti Spam, What is 9+1?</label><input id="form-inpt" class="form-control" type="text" name="Spam"> 

    <!-- Button --> 
    <label>Submit</label><input class="form-control" type="submit" value="submit" style="width: 200px;> 

</form> 
+0

真的嗎?你可能想向我們展示你的CSS或更好的仍然創建一個bootply - 通靈我們不是 –

+0

嗯,這就是它... http://www.bootply.com/GGZfOQh0ee –

+0

你不能有多個元素相同的ID。他們應該是唯一的! 'form-inpt'正在爲所有的輸入重複..使用類代替.. –

回答

1

嘗試使用引導DIV類,比如,

<div class="row"> 
    <div class="row"> 
     <label Id="1">...</label><input ...../> 
    </div> 
    <div class="row"> 
     <label Id= "2">...</label><input ...../> 
    </div> 
    . 
    . 
    . 
</div> 
+0

似乎沒有解決問題 –

+0

根據'饒'在評論中說,你必須使用不同的ID爲每個輸入。 –