Question

我正在显示一个有3个复选框的显示器。当触发其中一个复选框时，应显示消息或输入字段。我得到了那个部分，但是复选框和消息没有对齐，如下图所示

如您所见，“Ondertiteling”复选框未与文本“Ondertitel enabled”对齐。

这是我的代码（为了问题而省略了消息的切换）

.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.checkbox label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="container">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                      <span>Aanvraag #1</span>
                      <i class="fa fa-remove pull-right icon-clickable"></i>
                  </h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="checkbox">
                            <label> <input type="checkbox">Ondertitels</label>
                        </div>
                        <div class="checkbox">
                            <label> <input type="checkbox">Vertaling</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox">Voice-overs</label>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div>Ondertitel enabled</div>
                        <div>Vertaling enabled</div>
                        <div class="text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

如何将文本对齐到与复选框相同的高度？提前谢谢。

Answer 1

我会要求将标记更改为修复格式，以便引导程序为我们处理它。将标记更改为行，例如：

    <div class="row">
      <div class="col-lg-3">
        <div class="checkbox">
          <label><input type="checkbox">Vertaling</label>
        </div>
      </div>
      <div class="col-lg-9">
        <div class="checkbox">Vertaling enabled</div>
      </div>
    </div>

见下面的演示：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
          <span>Aanvraag #1</span>
          <i class="fa fa-remove pull-right icon-clickable"></i>
        </h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-lg-3">
            <div class="checkbox">
              <label><input type="checkbox">Ondertitels</label>
            </div>
          </div>
          <div class="col-lg-9">
            <div class="checkbox">Ondertitel enabled</div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3">
            <div class="checkbox">
              <label><input type="checkbox">Vertaling</label>
            </div>
          </div>
          <div class="col-lg-9">
            <div class="checkbox">Vertaling enabled</div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3">
            <div class="checkbox">
              <label><input type="checkbox">Voice-overs</label>
            </div>
          </div>
          <div class="col-lg-9">
            <div class="checkbox text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您的问题的解决方案是创建三个单独的行和一行，总共12列，您将使用3作为一个复选框，其他行作为通知或消息。因此，每个消息和复选框将捆绑在容器或行类中。如果您不理解我想说的话，将很快提供代码

Answer 3

从复选框类中删除10px margin-top或将其添加到othediv。我认为这是导致你的抵消的原因。：）

Answer 4

好的，您只需将margin-top: 10p x和margin-bottom: 10px添加到div

内的col-lg-9即可

Answer 5

您可能正在搜索的答案只是更改lg9 div中的line或字体高度

或仅使用一列，复选框和标签具有恒定宽度

将复选框和文本对齐在两个不同的列中

5 个答案: