Я использую гибкую коробку для отображения метки и ввода данных. Как мне сделать его отзывчивым? - PullRequest
Новая
       5

Я использую гибкую коробку для отображения метки и ввода данных. Как мне сделать его отзывчивым?

0 голосов
/ 04 мая 2018

Я использовал flex-класс, чтобы сделать метку и поле ввода одной строкой. Как заставить его сделать его отзывчивым? Мой HTML-код 

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

Как я могу сделать его отзывчивым?

вы можете увидеть в кодовом окне

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

Я исправляю это также в начальной загрузке. Вы можете увидеть в codepen 

<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>
0 голосов
/ 04 мая 2018

Использовать% вместо px для контейнера :) 

.container{
 width:100%;
 margin:0 auto;
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...