Почему два входных окна бок о бок внутри div накладывают дополнительную верхнюю часть?

109
12

Я пытаюсь сделать форму с двумя столбцами, используя бутстрап. Названия полей и улицы появляются рядом (большой экран), и никаких проблем нет, но во втором коде строки не совпадают по вертикали с городом, потому что почтовый индекс имеет 2 окна редактирования. Если я использую только одно окно редактирования в почтовом индексе, все выглядит нормально, но если я использую два окна редактирования, появляется дополнительный верхний верх. Зачем?

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<H1>Hello</H1>
<P>Sample text here.</P>

<section id="Delivery" class="Delivery-section">
<div class="container">

<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-10" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<legend style='text-align:center'>Delivery Address</legend>
</div>
<div class="col-sm-1">
</div>
</div>

<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<span style='font-weight: bold;font-size:13px;'>Name: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="name" id="name" value='' size="30" />
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'>
<span style='font-weight: bold;font-size:13px;'>Street: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="street" id="street" value='' size="30" />
</div>
<div class="col-sm-1">
</div>
</div>

<div class="row" style='padding:0px'>
<div class="col-sm-1">
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'>
<span style='font-weight: bold;font-size:13px;'>City: (*)</span><br>
<input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="city" id="city" value='' size="30" />
</div>
<div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'>
<span style='font-weight: bold;font-size:13px;'>Zip code: (*)</span><br>
<input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp1" id="cp1" value='' size="30" />
<input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp2" id="cp2" value='' size="30" />
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</section>

спросил(а) 2015-06-26T02:09:00+03:00 5 лет назад
1
Решение
94

Я не мог получить код, чтобы показать, что вы спросили о re padding top и т.д. Я удалил один из почтовых входов... все равно никакой разницы. (здесь используется хром).

Вот скрипка.

Я удалил все встроенные стили, чтобы код легче читать/следовать.
Я удалил все те пустые div, которые вы используете для смещения/заполнения. Такие пустые divs, как все, что бар, самый верхний, могут закончиться плаванием.
Я заменяю это на col-sm-offset-1 как вы увидите в row.

Я переделал почтовые и городские колоды здесь. Это то, что вы искали, когда вы спрашивали о вертикальном выравнивании почтового индекса и города?
Я был не уверен.

Изображение имеет большой экран.

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>Starter Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
body {
padding-top: 50px;
}
.space {
margin-top: 2%;
margin-bottom: 2%;
}

.address {
font-size: 20px;
text-align:center;
}
.inputs {
width:100%;
font-size:12px;
font-weight:300;
line-height:20px;
}
.zip {
width:14%;
font-size:12px;
font-weight:300;
line-height:20px;
}
.labels {
font-size: 20px;
padding:0px;
padding-left:0px;
}
</style>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<div class="container col-lg-12 space"></div>
<div class="container col-lg-12">

<H1>Hello</H1>
<P>Sample text here.</P>

<section id="Delivery" class="Delivery-section">
<div class="container">

<div class="row">
<!--<div class="col-sm-1">
</div>-->
<div class="col-sm-10 address" >
<legend>Delivery Address</legend>
</div>
<!--<div class="col-sm-1">
</div> -->
</div>

<div class="row col-sm-10 col-sm-offset-1">
<!-- <div class="col-sm-1">
</div>-->
<div class="col-sm-5">
<span class='labels'>Name: (*)</span><br>
<input class='inputs' type="text" name="name" id="name" value='' />
</div>
<div class="col-sm-5">
<span class='labels'>Street: (*)</span><br>
<input class='inputs' type="text" name="street" id="street" value='' />
</div>
<!-- <div class="col-sm-1">
</div>-->
<!--</div>-->

<div class="row col-sm-5">
<!-- <div class="col-sm-1">
</div>-->
<div class="col-sm-12">
<span class='labels'>City: (*)</span><br>
<input class='inputs' type="text" name="city" id="city" value='' />
</div>
<div class="col-sm-12">
<span class='labels'>Zip code: (*)</span><br>
<input class="zip" type="text" name="cp1" id="cp1" value='' />
<input class="zip" type="text" name="cp2" id="cp2" value='' />
</div>
<!-- <div class="col-sm-1">
</div>-->
</div>
</div>
</div>
</section>

</div><!-- /.container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>

Добавлено в этот пост

Используя исходный код, так как это то, что я вижу на большом экране, оба входа выравниваются.

enter image description here

ответил(а) 2015-06-26T05:54:00+03:00 5 лет назад
39

Чтобы исправить эту проблему, я просто вынул font-size:20px из проблемного элемента div. Что касается того, почему это, похоже, устранило проблему, я не могу сказать, потому что у вас это есть и в других элементах div, и это, похоже, не проблема. Однако я скажу, что атрибут font-size не нужно указывать в элементах div, поскольку вы даете размер шрифта каждому из элементов по отдельности, если, конечно, вы не собираетесь добавлять или иметь другие элементы, которые не указаны в коде выше. Я также проверил извлечение атрибута font-size из других элементов div, и он не имеет отрицательного эффекта.

ответил(а) 2015-06-26T05:46:00+03:00 5 лет назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема