Как вставить два inouts с помощью бутстрапа

Question

Я использую joomla 2.5 и twitter bootstrap. я создал форму, и я хочу встроить два входа, используя twitter Bootstrap и, конечно же, сохранить макет ответа. Вот мой код:

<form name="mycontact" id="mycontact" method="post" action=""> 
<?php if (!empty($messages)) { ?> 
    <div class="alert alert-error"> 
     <button type="button" class="close" data-dismiss="alert">&times;</button> 
     <?php echo $messages; ?> 
    </div><?php 
} 
if (!empty($succes)) { 
    ?> 
    <div class="alert alert-success"> 
     <button type="button" class="close" data-dismiss="alert">&times;</button> 
    <?php echo $succes; ?> 
    </div><?php 
} 
?> 

<p> 
    <label for="nom"><strong>Nom</strong></label> 
    <input type="text" name="nom" id="nom"/> 


</p> 
<p> 
    <label for="prenom"><strong>Pr&eacute;nom</strong></label> 
    <input type="text" name="prenom" id="prenom"/> 
</p> 
<p> 
    <label for="date"><strong>Date de naissance</strong></label> 
    <input type="text" name="date" id="date" /> 
</p> 
<p> 
    <label for="commune"><strong>Commune</strong></label> 
    <input type="text" name="commune" id="commune" /> 
</p> 
<p> 
    <label for="gsm"><strong>GSM</strong></label> 
    <input type="tel" name="gsm" id="gsm" /> 
</p> 
<p> 
    <label for="email"><strong>Email</strong></label> 
    <input type="email" name="email" id="email" /> 
</p> 

<h3>Quel est votre statut actuellement</h3> 
<p><label for="salarier"><input type="radio" name="statut" value="Salarié plein-temps" id="salarier"/> Salarié plein-temps</label></p> 
<p><label for="salarier_m"><input type="radio" name="statut" value="Salarié mi-temps" id="salarier_m"/> Salarié mi-temps</label></p> 
<p><label for="independant"><input type="radio" name="statut" value="independant" id="independant"/> Indépendant</label></p> 
<p><label for="etudiant"><input type="radio" name="statut" value="Etudiant" id="etudiant"/> Etudiant</label></p> 
<p><label for="passionne"><input type="radio" name="statut" value="Passionné" id="passionne"/> Pensionné</label></p> 
<p><label for="d_emploie"><input type="radio" name="statut" value="Demandeur d'emploi" id="d_emploie"/> Demandeur d'emploi</label></p> 
<p><label for="sans_status"><input type="radio" name="statut" value="Sans statut" id="sans_status"/> Sans statut</label></p> 

<div class="secteur"> 
    <h3>Dans quel secteur d'activité êtes-vous ?</h3> 
    <p><input type="text" name="secteur" id="secteur"/></p> 
</div> 

<div class="heure"> 
    <h3>Combien d'heure par semaine allez-vous consacrer à une activité complémentaire</h3> 
    <p><label for="heure1"><input type="radio" name="heure" value="Mois de 5 heures" id="heure1" /> Mois de 5 heures</label></p> 
    <p><label for="heure2"><input type="radio" name="heure" value="De 5 à 8 heures" id="heure2" /> De 5 à 8 heures</label></p> 
    <p><label for="heure3"><input type="radio" name="heure" value="Plus de 8 heures" id="heure3" /> Plus de 8 heures</label></p> 
</div> 

<div class="revenu"> 
    <h3>Quel revenu mensuel supplémentaires attendez-vous ?</h3> 
    <p><label for="revenu1"><input type="radio" name="revenu" value="de 200 à 500 &euro;" id="revenu1" /> De 200 à 500 &euro;</label></p> 
    <p><label for="revenu2"><input type="radio" name="revenu" value="de 500 à 1000 &euro;" id="revenu2" /> De 500 à 1000 &euro;</label></p> 
    <p><label for="revenu3"><input type="radio" name="revenu" value="de 1000 à 2500 &euro;" id="revenu3" /> De 1000 à 2500 &euro;</label></p> 
    <p><label for="revenu4"><input type="radio" name="revenu" value="plus de 2500 &euro;" id="revenu4" /> Plus de 2500 &euro;</label></p> 
</div> 

<div class="vehicule"> 
    <h3>Disposez-vous d'un véhicule ?</h3> 
    <p><label for="vehicule1"><input type="radio" name="vehicule" value="oui" id="vehicule1" /> Oui</label></p> 
    <p><label for="vehicule2"><input type="radio" name="vehicule" value="non" id="vehicule2" /> Non</label></p> 
</div> 

<div class="affinite"> 
    <h3>Avez-vous des affinités avec le secteur des télécoms ou de l'énergie ?</h3> 
    <p><label for="affinite1"><input type="radio" name="affinite" value="oui" id="affinite1" /> Oui</label></p> 
    <p><label for="affinite2"><input type="radio" name="affinite" value="non" id="affinite2" /> Non</label></p> 
</div> 

<div class="rencontre"> 
    <h3>Aimez-vous recontrer des gens</h3> 
    <p><label for="rencontre1"><input type="radio" name="rencontre" value="oui" id="rencontre1" /> Oui</label></p> 
    <p><label for="rencontre2"><input type="radio" name="rencontre" value="non" id="rencontre2" /> Non</label></p> 
</div> 
<p> 
    <input type="submit" name="mycontact_btn" id="my_contact_btn" value="Submit" class="btn" /> 
</p> 

и здесь форма онлайн: form
Как я могу это сделать?

Answer 1

Если вы хотите встроить только некоторые элементы своей формы, просто используйте Bootstrap grid system.

<div class="row">   
    <p class="span6"> 
     <label for="nom"><strong>Nom</strong></label> 
     <input type="text" name="nom" id="nom"/> 
    </p>    
    <p class="span6"> 
      <label for="prenom"><strong>Pr&eacute;nom</strong></label> 
      <input type="text" name="prenom" id="prenom"/> 
     </p> 
</div>  

Exemple на jsFiddle: http://jsfiddle.net/MgcDU/7526/