twitter-bootstrap - 如何使用 Bootstrap 内联两个 inouts

  显示原文与译文双语对照的内容
129 2

我正在使用 joomla 2.5和 Twitter Bootstrap 。 我创建了一个表单,我想使用 Twitter Bootstrap 来内联两个输入,当然还保留了responsie布局。 这是我的代码:


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


这里是在线表格: 表单
我该怎么做?

时间: 原作者:

115 5

如果只想内联某些表单元素,只需使用 Bootstrap 网格系统。


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

jsFiddle: http://jsfiddle.net/MgcDU/7526/ 示例

原作者:
...