自适应占位符和自举输入组

Question

我想在我的页面上使用自适应占位符CSS文件 - 它对文本和选择输入非常适用，但是当我尝试将它与bootstraps输入组一起使用时，它不会工作。

我创建了一个bootply来说明我的意思bootply（中间是什么，我希望它看起来像）

这是不采取适应性占位符输入组

<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-SM-5调整跨度左和COL-SM-1调整跨度右。 您也可以使用col-sm-6到col-sm-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样式的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); 
} 
}