1

Что то не приходит ничего полезного в голову, есть два вида, условно - десктоп и моб версии, необходимо в моб версии перенести красную скнопку под все эелементы:

десктоп

моб

Текущая разметка:

<div class="row">
	<div class="col-sm-5">
		<div class="form-group mvf-bajas-required">
			<label for="">Tipo de producto</label>
			<select name="" id="" class="form-control">
				<option value="" default>Selecciona</option>
				<option value="">Selecciona</option>
				<option value="">Selecciona</option>
				<option value="">Selecciona</option>
				<option value="">Selecciona</option>
			</select>
		</div>
		<div class="form-group">
			<a href="#" class="btn btn-primary">Anadir</a>
		</div>
	</div>
	<div class="col-sm-7">
		<div class="row">
		   <div class="col-sm-4">
			   <div class="form-group mvf-bajas-required">
				   <label for="">Numero</label>
				   <input id="" name="" type="text" class="form-control" placeholder="677 761 768">
			   </div>
		   </div>
		   <div class="col-sm-8">
			   <label>Marca los productos que deseas dar de baja:</label>
			   <div class="mvf-bajas-checkbox-group">
				   <input id="checkbox1" name="" type="checkbox">
				   <label for="checkbox1">Television Linea 56</label>
			   </div>
		   </div>
		</div>
		<div class="row">
			<div class="col-sm-4">
				<div class="form-group mvf-bajas-required">
					<label for="">Numero</label>
					<input id="" name="" type="text" class="form-control" placeholder="677 761 768">
				</div>
			</div>
			<div class="col-sm-8">
				<div class="mvf-bajas-checkbox-group">
					<input id="checkbox2" name="" type="checkbox">
					<label for="checkbox2">Television Linea 58</label>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-4">
				<div class="form-group mvf-bajas-required">
					<label for="">Numero</label>
					<input id="" name="" type="text" class="form-control" placeholder="677 761 768">
				</div>
			</div>
			<div class="col-sm-8">
				<div class="mvf-bajas-checkbox-group">
					<input id="checkbox3" name="" type="checkbox">
					<label for="checkbox3">Television Linea 22</label>
				</div>
			</div>
		</div>
	</div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ничего кроме как сделать еще одну кнопку и одну скрывать в моб, другую в десктопе, в голову не лезет.

Любые светлые мысли?

5
  • Почему не сделать отступ в десктоп версии?
    – Alex78191
    25 мая 2017 в 14:28
  • @Alex78191 Какой отступ?
    – Bookin
    25 мая 2017 в 14:32
  • задать margin для с помощью media query
    – Alex78191
    25 мая 2017 в 14:37
  • для моб версии опустить кнопку маржином?
    – Bookin
    25 мая 2017 в 14:43
  • Да, или поднять в десктопной или опустить
    – Alex78191
    25 мая 2017 в 14:46

1 ответ 1

1

Можно добавить среднему блоку правый флоат на экранах шириной от 768 пикселей. У двух других блоков останется левый флоат, и они окажутся друг под другом.

/* суть дела */
@media (min-width: 768px) {
  .pull-sm-right { 
    float: right !important;
  }
}

/* для красоты */
.decorations > div {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  padding-top: 6px; 
}
.decorations > div:nth-of-type(1) { background: #9c6; min-height:  80px; }
.decorations > div:nth-of-type(2) { background: #69c; min-height: 200px; }
.decorations > div:nth-of-type(3) { background: #f33; min-height:  80px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row decorations">
    <div class="col-sm-5">Поле со списком</div>
    <div class="col-sm-7 pull-sm-right">Много полей</div>
    <div class="col-sm-5">Кнопка</div>
  </div>
</div>

1
  • В принципе в том же направлении думал думал та и не дадумал, дедлайны они такие) Спасибо.
    – Bookin
    28 мая 2017 в 19:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.