在響應式特性中合併div中的兩個div

Question

我在asp.net中製作了響應式表單。我想結合兩個div與響應功能。這裏有Out put of my code

.container { 
 
    padding-right: 15px; 
 
    padding-left: 0px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    overflow: hidden; 
 
} 
 
.txtBoxLeft { 
 
    border-top-left-radius: 10px; 
 
    border-bottom-left-radius: 10px; 
 
    border: solid 1px #5250fb; 
 
    float: left; 
 
    width: auto; 
 
    padding: 14px; 
 
    font-size: 16px; 
 
    background-color: #908fff; 
 
    color: white; 
 
} 
 
.txtBoxRight { 
 
    border-top-right-radius: 3px; 
 
    border-bottom-right-radius: 3px; 
 
    border: solid 1px #5250fb; 
 
    float: left; 
 
    font-size: 16px; 
 
    padding: 14px; 
 
    margin-right: 12px; 
 
} 
 
.txtBoxRight:focus { 
 
    border: solid 1px #908fff; 
 
    background-color: #f3f4ff; 
 
} 
 
.txtBoxRight-1 input[type="text"] { 
 
    width: 70%; 
 
    margin-bottom: 12px; 
 
} 
 
.txtBoxRight-7 input[type="text"] { 
 
    width: 30%; 
 
    margin-bottom: 12px; 
 
}

<div class="container"> 
 
    <div class="txtBoxLeft">CNIC#</div> 
 
    <div class="txtBoxRight-1"> 
 
    <asp:TextBox ID="txtCNIC" CssClass="txtBoxRight" runat="server"></asp:TextBox> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="txtBoxLeft">Drop 1-ID</div> 
 
    <div class="txtBoxRight-7"> 
 
    <asp:TextBox ID="txtDrop1ID" Class="txtBoxRight" runat="server" ToolTip="ID"></asp:TextBox> 
 
    </div> 
 
</div>

我重視的代碼和輸出的細節。在此先感謝

Answer 1

集容器寬度100％，然後給每一個控件需要根據您的需要， 移動響應使用此代碼

@media（最大寬度：768px）來響應寬度百分比％{ .myclass { 將每個輸入展開爲100％ } }