Question

我正在asp.net中制作一个响应式表单。我想结合两个具有响应功能的div。以下是详细信息Out put of my code

＆＃13;

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

＆＃13;

<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>

＆＃13;

我附上了代码和输出。提前致谢

Answer 1

将容器宽度设置为100％，然后根据需要为每个控件提供响应宽度百分比％，移动响应使用此代码

@media（max-width：768px）{ 。我的课 { 将每个输入扩展到100％ } }

合并具有响应功能的div中的两个div

1 个答案: