调整大小后，控件的标签会跳到右侧

Question

我生成的HTML是：

我把它放在Bootply中，这样你就可以更容易地看到并玩它了，注意它也有一个小的CSS部分：

http://www.bootply.com/NrxiDfZJdC

问题是它不是＆＃34; bootstrappy＆＃34;足够！如果您开始缩小窗口，标签将跳转到控件的右侧。 我做了什么导致了这个问题？

Answer 1

添加自适应文字对齐班级text-sm-right而不是text-right

@media (min-width: @screen-sm-min) {
    .text-sm-right { text-align: right; }
}

bootply

Answer 2

这里有几个主要问题。

右对齐：

您已在标签上添加.text-right进行设置。显然这仅适用于桌面视图。 将其从标签上取下并使用最小宽度的媒体查询来设置对齐或在小分辨率下覆盖最大宽度的对齐

溢出的文本框：

你没有使用过一行。您应该最常使用一行，因为它可以校正带有负左右边距的填充。您试图通过添加一个删除.col-sm-4上的填充的类来自行修复此问题。填充是有原因的，不应该删除。但是，即使添加行并删除.multi-row 也无法完全解决问题。当你这样做时，你会遇到太宽的文本输入。那是因为您在输入中添加了100%宽度。这本身并不是一件坏事，但它会导致问题，因为您已使用span作为内部列。 span的宽度自然会崩溃。他们不会填补他们的父母和他们的父母。像div这样的容器。 将其换成div s。

奇怪＆＃34;分机＆＃34;标签

这是因为您在标签上添加了margin-left: 85%以模拟其他人拥有的正确对齐方式。只需删除该边距并将text-right 添加到此标签，就像您在所有其他类似标签上一样。

没有填充：

毕竟，在较小的分辨率上你没有填充。 在表单周围添加.container。

最后，您应该拥有：http://www.bootply.com/uiPpBytre3

演示：

＆＃13;

＆＃13;

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);

.form-input{
  width :100%;
}

@media(max-width: 768px) {
  .form-group .text-right {
    text-align: left;
  }
}

＆＃13;

<div class="container">
  <form class="form-horizontal" role="form">
    <br>

    <div class="row form-group">
      <div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Name">Name</label></div>
      <div class="col-sm-4"><select class="form-control" id="nameadmin" name="nameadmin"><option>77881</option>
        <option>77882</option>
        <option>77883</option>
        <option>77884</option>
        <option>77885</option>
        </select></div>
      <div class="col-sm-4 col-sm-offset-1">
        <div>
          <input class="checkbox-inline" id="ShowEmailInFooter" name="ShowEmailInFooter" type="checkbox" value="true"><input name="ShowEmailInFooter" type="hidden" value="false">
          <label class="control-label" for="Show_Email_in_Footer">Show Email in Footer</label>
        </div>
      </div>
    </div>
    <div class="row form-group">
      <div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
      <div class="col-sm-4">
        <input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
        <span class="glyphicon glyphicon-envelope  form-control-feedback" style="right: 10px; line-height: 27px; color: lightblue"></span>
      </div>
      <div class="col-sm-4 col-sm-offset-1">
        <div>
          <input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
          <label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
        </div>
      </div>
    </div>
    <div class="row form-group">
      <div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
      <div class="col-sm-4">
        <div class="row">
          <div class="col-sm-5"><input class="form-input" id="AdminPhone" name="AdminPhone" type="text" value=""></div>
          <div class="col-sm-2 text-right"><label class="control-label" for="Ext">Ext</label></div>
          <div class="col-sm-5"><input class="form-input" id="AdminExt" name="AdminExt" type="text" value=""></div>
        </div>
      </div>
    </div>
  </form>

</div>

＆＃13;

＆＃13;

＆＃13;