自適應佔位符和自舉輸入組

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); 
} 
}