Question

我使用flex类使标签和输入字段成为一行。如何强制它使其响应？我的HTML代码是

＆＃13;

.container{
  width:1100px;
  margin:0 auto;
}

.form_single_wrap{
  display:flex;
  flex-wrap: wrap;
}
.form_single_wrap label{
  width:10%;
}
.form_single_wrap input{
  width:80%;
}

＆＃13;

<div class="container"> 
  <div class="form_wrap"> 
    <form action=" ">
      <div class="form_single_wrap"> 
        <label for="name">Name</label>
        <input type="text" name="name" placeholder="Name"/>
      </div>
      <div class="form_single_wrap"> 
        <label for="email">Email Send Us</label>
        <input type="text" name="email" placeholder="Email"/>
      </div>
    </form>
  </div> 
</div>

＆＃13;

我如何才能使其响应？

您可以在codepan

中看到

Answer 1

对容器使用％而不是px :)

.container{
 width:100%;
 margin:0 auto;
 }

Answer 2

我也在bootstrap中修复它。您可以在codepen

中看到

＆＃13;

<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css" />
	<style type="text/css">
    .form_wrap{
      width:100%;
    }
			.form_single_wrap{
				display:flex;
				flex-wrap: wrap;
			}
			.form_single_wrap label{
				width:10%;
			}
			.form_single_wrap input{
				width:80%;
			}	
	</style>
</head>
<body>
	<div class="container">
		<div class="row"> 
			<div class="form_wrap"> 
				<form action=" ">
					<div class="form_single_wrap"> 
						<label for="name">Name </label>
						<input type="text" name="name" placeholder="Name"/>
					</div>
					<div class="form_single_wrap"> 
						<label for="email">Email Send Us</label>
						<input type="text" name="email" placeholder="Email"/>
					</div>
				</form>
			</div> 		
		</div>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" ></script>
</body>
</html>

＆＃13;

我使用弹性框来显示标签和输入字段。如何使其响应？

2 个答案: