Bootstrap3: разрыв строки внутри метки портит макет столбца
Bootstrap3: разрыв строки внутри метки препятствует тому, чтобы следующий столбец занял ожидаемое место в макете. Это происходит как раз в md-layout.
md-Layout с разрывом строки внутри метки. Хочу "ПЛЗ и Орт" -вход в том же месте, что и в sm-Layout.
md-Layout без переноса строки внутри метки. Все хорошо.
JSFiddle: https://jsfiddle.net/Phantomias/q1kvsh5w/8/
<div class = "container">
<form id = "form_settings" class = "form-horizontal">
<div class = "row">
<div class = "col-sm-12">
<div class = "panel panel-primary">
<div class = "panel-heading">
Inhaberdaten
</div>
<div class = "panel-body">
<fieldset>
<div class = "col-sm-6 col-md-6">
<div id = "div_name" class = "form-group required">
<div class = "col-xs-12 col-sm-4 col-md-4">
<label class = "control-label" for = "name" style = "">Vor- und Nachname</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[name]" id = "name" type = "text">
</div>
</div>
</div>
<div class = "col-sm-6 col-md-6">
<div id = "div_strasse" class = "form-group required">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "strasse" style = "">Straße und Nr.</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[strasse]" id = "strasse" type = "text">
</div>
</div>
</div>
<div class = "col-sm-6 col-md-6">
<div id = "div_ort" class = "form-group required">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "ort" style = "">PLZ und Ort</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[ort]" id = "ort" type = "text">
</div>
</div>
</div>
<div class = "col-sm-6 col-md-6">
<div id = "div_shopname" class = "form-group">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "shopname" style = "">Palundu-Shopname</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[shopname]" id = "shopname" type = "text">
</div>
</div>
</div>
<div class = "col-sm-6 col-md-6">
<div id = "div_telefon" class = "form-group required">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "telefon" style = "">Telefon</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[telefon]" id = "telefon" type = "text">
</div>
</div>
</div>
<div class = "col-sm-6 col-md-6">
<div id = "div_fax" class = "form-group">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "fax" style = "">Fax</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[fax]" id = "fax" type = "text">
</div>
</div>
</div>
<div class = "col-sm-6 col-md-6">
<div id = "div_email" class = "form-group required">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "email" style = "">E-Mail</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[email]" id = "email" type = "text">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</form>
</div>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
34
1
Ответы 1
Ваша структура начальной загрузки неверна. Используйте следующую структуру
Я добавил недостающий класс строки для различных элементов. Он должен работать так, как вы ожидаете.
<link rel = "stylesheet" type = "text/css" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel = "stylesheet" type = "text/css" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<div class = "container">
<form id = "form_settings" class = "form-horizontal">
<div class = "row">
<div class = "col-sm-12">
<div class = "panel panel-primary">
<div class = "panel-heading">
Inhaberdaten
</div>
<div class = "panel-body">
<div class = "row">
<div class = "col-sm-6 col-md-6">
<div id = "div_name" class = "form-group required row">
<div class = "col-xs-12 col-sm-4 col-md-4">
<label class = "control-label" for = "name" style = "">Vor- und Nachname</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[name]" id = "name" type = "text">
</div>
</div>
</div>
<div class = "col-sm-6 col-md-6">
<div id = "div_strasse" class = "form-group required row">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "strasse" style = "">Straße und Nr.</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[strasse]" id = "strasse" type = "text">
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col-sm-6 col-md-6">
<div id = "div_ort" class = "form-group required row">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "ort" style = "">PLZ und Ort</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[ort]" id = "ort" type = "text">
</div>
</div>
</div>
<div class = "col-sm-6 col-md-6">
<div id = "div_shopname" class = "form-group row">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "shopname" style = "">Palundu-Shopname</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[shopname]" id = "shopname" type = "text">
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col-sm-6 col-md-6">
<div id = "div_telefon" class = "form-group required row">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "telefon" style = "">Telefon</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[telefon]" id = "telefon" type = "text">
</div>
</div>
</div>
<div class = "col-sm-6 col-md-6">
<div id = "div_fax" class = "form-group row">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "fax" style = "">Fax</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[fax]" id = "fax" type = "text">
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col-sm-6 col-md-6">
<div id = "div_email" class = "form-group required row">
<div class = "col-xs-12 col-sm-4 col-md-4 text-right text-left-xs">
<label class = "control-label" for = "email" style = "">E-Mail</label>
</div>
<div class = "col-xs-12 col-sm-8 col-md-8">
<input class = "form-control" name = "inh_daten[email]" id = "email" type = "text">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>Ссылка на рабочий пример
Большое спасибо за ответ? Я знаю, что дополнительные классы строк решают проблему. Но я хотел бы знать причину, по которой свойство css заставляет макет работать в sm-layout и не работать в md-layout. Добавление дополнительных классов строк сложно, потому что код генерируется с функцией.
—
11.07.2018 15:03
stackoverflow.com/questions/22310912/… См. В этом ответе с самым высоким рейтингом, это та же проблема, что и у вас, и используйте первый подход, если можете. Кроме того, вы можете показать код, который генерирует этот html, может быть, я могу помочь правильно обновить эту функцию
—
11.07.2018 15:14
Другие вопросы по теме
Bootstrap col-xs- * не работает
Столбцы начальной загрузки действуют как строки
Выравнивание выпадающего меню по правому краю в bootstrap 3
Невозможно правильно отобразить карусель Bootstrap в Angular2 +
Bootstrap Modal не показывает диалог
Ссылки внутри группы списков Bootstrap с заголовком и всплывающей подсказкой встряхивают нижнее содержимое
Как совместить Bootstrap 3 и Ant Design 3
Позиция выбора даты начальной загрузки
Установка значений по умолчанию в модальном диалоговом окне
Глификон бутстрапа не проявляет себя
Похожие вопросы
Как я могу сохранить текстовый формат таким же, как он был записан в админке django
Как правильно спроектировать html-форму
Изображение не отображается на веб-странице, если имя изображения содержит какой-либо специальный символ
VBA, чтобы щелкнуть Internet Explorer ТОЛЬКО с помощью Onlick
Скрыть overlaypanel, когда я нажимаю за пределами поля или в поле Angular 4
Только для чтения и обязательно для одного поля ввода
Как убедиться, что мое изображение заголовка реагирует на любую высоту и ширину?
Какой из них правильный относительно вызова функции в JavaScript?
TypeError: Functionname не является функцией в HTMLButtonElement.onClick
Правила проверки HTML с регулярным выражением
Привет, мой ответ решил вашу проблему?