Question

我在我的bootstrap应用程序的响应版本上遇到了一些问题。让文本与复选框内联（并在下面环绕）的最佳方法是什么？

有问题的行如下：

/* Please ignore my use of &nbsp;... 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>

Here's a picture of my issue

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

希望这是有道理的。非常感谢帮助！

Answer 1

快速而肮脏的方式是使用float。

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

将文本换行到与复选框相同的行

1 个答案: