如何在 Laravel + Bootstrap 表单中将复选框和标签保持在一行

Posted 2023-03-14

【中文标题】如何在 Laravel + Bootstrap 表单中将复选框和标签保持在一行

【英文标题】：How to keep checkbox and label in one line in Laravel + Bootstrap form

【发布时间】：2017-04-13 05:46:28

【问题描述】：

我的观点有一个形式。在这种形式中，我有这个：

<div class="row">
    !! Form::label('math', 'Mathematics',
                     array('class' => 'col-xs-offset-4 col-lg-2 col-xs-5 text-right')) !!
    !! Form::checkbox('exams[1]', '2')!!
</div>

现在看起来像这样：

如何将标签和复选框保持在一行？

编辑

这样解决：

<div class="row">
    <label class="col-xs-offset-4 col-lg-2 col-xs-5 text-right">Mathematics
       !! Form::checkbox('exams[1]', '2')!!
    </label>
</div>

【问题讨论】：

可以使用CSS样式margin

是否可以使用引导程序，无需手动 css 类？

不。您不能依赖引导程序。您需要添加自定义 css。

老实说，我不建议checkbox 不用标签。对于用户友好的 pov，您应该用 label 包裹 checkbox。意思是，用户不需要精确地点击 checkox 位置。它也可以点击标签。例如<label><input type="checkbox" id="checkboxWarning" value="option1">Your Label</label>

是的，我也是这样做的

【参考方案1】：

当我运行你的代码时，它已经在同一行了，所以你可能想检查是否加载了引导程序。

您也可以添加一个类，例如“mt10”

 !! Form::label('math', 'Mathematics',
                 array('class' => 'col-xs-offset-4 col-lg-2 col-xs-5 text-right')) !!
 !! Form::checkbox('exams[1]', '2', null, array('class' => 'mt10'))!!

并为类添加一些边距（可能或多或少的像素）

.mt10  margin-top: 10px; 

【参考方案2】：

为您的字段提供类或 ID，例如 checkbox

!! Form::checkbox('exams[1]', '2', false, ['class' => 'checkbox']) !!

现在在你的样式表代码中是这样的：

.checkbox 
   margin-top: 5px; // try +/- the pixel, check what works for you

【讨论】：

复选框中的第三个参数：['class' => 'checkbox'] 给我选中的字段。我认为用 Laravel 给复选框上课是不可能的

【参考方案3】：

为您的复选框指定类别或样式

!! Form::checkbox('exams[1]', '2', ['class' => 'asad'])!!

【讨论】：

Parse error: syntax error, unexpected '=>' (T_DOUBLE_ARROW), expecting ',' or ')'

是的，这是不正确的。 'class'=>'asad' 应该是数组

@AlexLukinov 现已修复

与@Mahfuzul Alam 回答的评论相同