代码之家 › 专栏 › 技术社区 › nbokmans

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

twitter-bootstrap css html

nbokmans · 技术社区 · 7 年前

如您所见,“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>

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

5 回复 | 直到 7 年前

kukkuz 7 年前

我会要求改变修理格式化,以便引导将为我们处理它。将标记更改为排

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

请参阅下面的演示:

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

Syed Huzaifa Hassan 7 年前

因此,每个消息和复选框将捆绑在容器或行类中。

zurricanjeep 7 年前

从checkbox类中删除10px margin top,或将其添加到othediv。我认为这就是你的补偿的原因。:)

Rémy Testa 7 年前

好的,那么你只需要添加 margin-top: 10p x和 margin-bottom: 10px div 内部 col-lg-9

-1

Neil 7 年前

line 或lg9 div中的字体高度

或者只使用一列,复选框和标签具有恒定宽度