Я пытаюсь создать страницу со встроенной формой с помощью add-group-addon в Bootstrap 3. Однако элементы на странице не выровнены должным образом.Я перепробовал много вещей, но безрезультатно.
Страница состоит из двух столбцов.В первом столбце есть кнопка, которая называется «Кнопка 1».Во втором столбце находится текстовое поле «Цена» с прикрепленным к нему знаком евро и кнопкой «Кнопка 2».Эти последние три элемента выровнены вправо.Цель состоит в том, чтобы на очень маленьких экранах (xs) текстовое поле со знаком евро и второй кнопкой переходило под первую кнопку, а текстовое поле со знаком евро и второй кнопкой должно оставаться рядом друг с другом.На очень маленьких экранах оба столбца могут быть выровнены по левому краю.Однако на очень маленьких экранах знак евро выравнивается по правому краю, нажимая вторую кнопку под текстовым полем.
Я создал тестовую страницу, которую вы можете просмотреть по указанному ниже URL-адресу: https://dev.velgenweb.be/test.html
код выглядит следующим образом:
/* Conditional pull-right */
@media (max-width: 767px) {
.pull-right.pull-left-xs {
float: left !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.pull-right.pull-left-sm {
float: left !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.pull-right.pull-left-md {
float: left !important;
}
}
@media (min-width: 1200px) {
.pull-right.pull-left-lg {
float: left !important;
}
}
#price {
width: 78px;
}
<!DOCTYPE html>
<html>
<head>
<title>Input group addon</title>
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/test.css">
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-1 hidden-xs hidden-sm" id="desktop_left">
</div>
<div class="col-xs-12 col-md-9">
<div class="panel-group" id="header">
<div class="panel panel-default" id="control_panel">
<div class="panel-body">
<form class="form-inline" role="form" action="/test.html" method="post">
<div class="row">
<div class="col-sm-6">
<button type="button" class="btn btn-default">Button 1</button>
</div>
<div class="col-sm-6">
<div class="pull-right pull-left-xs">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="price" name="price" placeholder="price" maxlength="6" />
<span class="input-group-addon" id="price_addon">€</span>
</div>
</div>
<button type="button" class="btn btn-default" id="button">Button 2</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<main role="main">
<div class="panel panel-default">
<div class="panel-body">
This is a test page.
</div>
</div>
</main>
</div>
<div class="col-md-2 hidden-xs hidden-sm" id="desktop_right">
</div>
</div>
</div>
</body>
</html>
How can I solve this problem?
Thanks in advance for the tips and suggestions.
With kind regards,
Kristof