自适应占位符和引导输入组

Question

我试图在我的页面上使用自适应占位符CSS文件--它对文本和选择输入非常有效，但是当我尝试在引导输入组中使用它时，它就是不起作用。

我创建了一个引导程序来展示自举的含义(中间的一个是我希望它看起来的样子)

​

这是不接受自适应占位符的输入组。

<div class="row">
    <div class="col-sm-6">
        <div id="divSupplierInput2" class="input-group">
            <input class="form-control" type="text" id="Text2" name="txtSupplier" value="" runat="server"
                required="">
            <label for="txtSupplier" placeholder="Supplier">
            </label>
            <span class="input-group-btn">
                <button class="btn btn-secondary btn-sm" type="button">
                    ...</button>
            </span>
        </div>
    </div>
</div>

这是一种输入，它在其中起作用

<div class="row">
<div class="col-sm-6">
    <input id="Text1" type="text" class="form-control input-sm" runat="server" required="">
    <label for="txtInvoiceNumber" placeholder="Invoice Number">
    </label>
</div>

​

任何帮助都是非常感谢的，干杯

Answer 1

使用两个div，col 5调整跨距左和col 1调整跨度-右。您也可以使用col 6到col 11，这取决于您希望它的长度。注:我分别向div添加了“调整跨度”和“调整范围”，现在使用CSS对其进行相应的调整：

.adjust-span-right{
  margin-left: -40px;
}
/* To make it responsive to smaller screens add this */
@media screen and (max-width: 780px) {
  .adjust-span-left{
  float:left;
  width:90%;
  overflow:hidden;
  }
  .adjust-span-right{
  float:left;
  width:10%;
  overflow:hidden;
  } 
}

然后使用这个输入

<div class="row">
  <div class="col-sm-5 adjust-span-left">
    <input id="txtInvoiceNumber" type="text" class="form-control input-sm" runat="server" required="">
    <label for="txtInvoiceNumber" placeholder="Invoice Number">
    </label>
  </div>
  <div class="col-sm-1 adjust-span-right">
    <span class="input-group-btn">
        <button class="btn btn-secondary btn-sm" type="button">
            ...
        </button>
    </span> 
  </div>
</div>

编辑我注意到占位符没有显示在较小的屏幕上焦点，所以您也应该调整css的响应样式。

类似于：

@media screen and (max-width: 780px) {
 input[type="text"][required]:focus + label[placeholder]:before,
 input[type="text"][required]:valid + label[placeholder]:before {
   /* Adjust the css accordingly */
  -webkit-transform: translate(6px, -10px);
  -ms-transform: translate(6px, -10px);
  transform: translate(8px, -10px);
 }
}