/ / Zalomte text na rovnakom riadku ako začiarkavacie políčko - html, css, twitter-bootstrap

Zalomiť text na rovnakej linke ako začiarkavacie políčko - html, css, twitter-bootstrap

Mám nejaké problémy s niektorými displejmi na interneteresponzívna verzia mojej bootstrapovej aplikácie. Aký je najlepší spôsob, ako zaistiť, aby text sedel v kolónkach so začiarkavacími políčkami (a omotal sa okolo)?

Predmetný riadok je nasledujúci:

/* Please ignore my use of  ... i"ve changed that to a margin in the latest revision */
<li class="list-group-item"><input type="checkbox" id="checkbox".$i.$iter."" name="pagesToGenerate[]" value="".$file.""/>&nbsp;&nbsp;<label class="files" for="checkbox".$i.$iter."">".str_replace($dir, "", $t)."</label></li>

Tu je obrázok môjho problému

<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse<?php echo $i ?>"><?php echo basename($dir)?></a>
</h4>
</div>
<div id="collapse<?php echo $i ?>" class="panel-collapse collapse">
<ul class="list-group">
<?php
$dir = "templates/".$dirname."/";

$remaining = array_diff(glob($dir."*.docx"), glob($dir."~$*"));
$iter = 0;

echo "<ul class="list-group filesChecklist">";
foreach ($remaining as $t) {
// "$i.$iter" is to differentiate the labels for each group
$file = implode(":",[$dirname, str_replace($dir, "", $t)]);
echo "<li class="list-group-item"><input type="checkbox" id="checkbox".$i.$iter."" name="pagesToGenerate[]" value="".$file.""/>&nbsp;&nbsp;<label class="files" for="checkbox".$i.$iter."">".str_replace($dir, "", $t)."</label></li>";
$iter++;
}
echo "</ul>";
?>
</ul>
</div>
</div>
</div>

Dúfajme, že to dáva zmysel. Pomoc sa veľmi cení!

odpovede:

2 pre odpoveď č. 1

Rýchlym a špinavým spôsobom by bolo použitie plaváka.

.list-group-item input {
float: left;
}