Question

我已经花了很长时间寻找解决方案，但似乎我找不到任何东西。我的问题是我有一个logIn表单，我想用背景颜色设置输入文本的标签，但我不能使用输入中的那个来匹配标签背景的大小。如果我用宽度：XX和边距强制它，当屏幕尺寸改变时我失去了合适。

我的问题是，如何将标签背景和大小与相关输入相匹配？是否有适合它的属性？

以下是我的问题以及我想要做的事情： http://s15.postimg.org/8e8cpo7vv/sample.png

我的表格就是那个

 <form class="logForm form-horizontal">
  <div class="form-group">
      <label for="username" class="control-label" id="form1">You must enter a User ID</label>
    <div class="col-sm-12">
      <input type="text" class="in1 form-control" id="username" name="User ID">
    </div>
  </div>
  <div class="form-group">
    <div class="L1 col-sm-12">
        <label for="password" class="control-label">You must enter a Password</label>
      </div>
    <div class="col-sm-12">
      <input type="password" class="in1 form-control" id="password" name="Password" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,20}$" required="required">
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-12">
        <button type="button" class="boto boto-logFrom" onclick="javascript:submit_data();" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,20}$" required="required">Sign in</button>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-9">
      <div class="checkbox">
        <label>
          <input type="checkbox"> <span style="font-size: 12px; line-height: 5px;">Stay Signed</span>
        </label>
      </div>
      </div>
    <div class="col-sm-3" style="margin-top: 1%; font-size: 12px;">
        <a href="helpform"> Can't access?</a>
    </div>
  </div>
</form>

这是我的css：

input.in1 {
background-color: #F6ECED;
border-radius: 0px;
box-shadow: disable;
width: 100%;
}
.L1 {
text-align: left;
background-color: #973939;
font-weight:100;
color:#FFF;
font-family: "Open Sans", Arial, Helvetica, Geneva, sans-serif;
margin-left: 2% !important;
width: 95.7% !important;
padding-top: 6px;
padding-bottom: 6px;
}

谢谢你们

Bootstrap：将标签背景大小与输入文本大小匹配

0 个答案: