• Объявления

    • dinox

      Закрытый раздел разработчиков   21.08.2017

      У нас на форуме существует закрытый раздел для разработчиков в котором мы обсуждаем нюансы работы на нашем форуме, в каталоге дополнений и другие моменты которые интересны в большинстве случаев только разработчикам. На данный момент существует лишь 2 условия для попадания:
      1. Наличие промодерированного дополнения в нашем каталоге  2. Отсуствие варезной деятельности 
      Если эти правила выполнены, пишите запрос @ArtemPitov на попадание в раздел разработчиков
newjey

Вопрос по bootstrap разметке

Рекомендуемые сообщения

newjey    1

В карточке товара не получается один блок выровнять

454545.jpg

 

4ый блок почему-то ровняется по 2му блоку и получается не красиво. Как его подтянуть выше, под 3ий блок?

margin пробовал, но при просмотре на мобильном блоки наезжают друг на друга.

 

Сейчас разметка имеет такой вид

 <div class="row" style="margin-top:-13px;"> <?php echo $column_left; ?>
       <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
      <div class="row">
		<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4 visible-lg visible-md nopad" style="float:right;">	
		логотип		
		</div>
		
		<div class="col-xs-12 col-sm-12 col-md-7 col-lg-8" style="float:left;">
			1ый блок
		</div>
		   

		<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4" style="float:right;">
			3ий блок
		</div>
		
			<div class="col-xs-12 col-sm-12 col-md-7 col-lg-8" style="float:left;">	
				
			2ой блок
				
		</div>	
			<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4" style="float:right;">	
				4ый блок
        </div>
      </div>	
		</div>	
			 </div>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
n3bo    169

<div class="row">
 <div class="col-sm-8">
   <div>1</div>
   <div>2</div>
 </div>
 <div class="col-sm-4">
   <div>3</div>
   <div>4</div>
</div>

Сразу пришел такой вариант в голову, но цена будет после описания на мобилках... Сейчас подумаем)

 

Как вариант:

<div class="row">
 <div class="col-sm-8">
   1
 </div>
 <div class="col-sm-4">
   <div>3</div>
   <div>4</div>
</div>
<div class="col-sm-8">
 2
</div>
Изменено пользователем n3bo

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
newjey    1

Спасибо за ответ, но надо что бы блок 4 на мобильных был тоже в конце.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
newjey    1

На мобильном сейчас отображается вот так

9999999999_4536078_24672167.jpg

 

И так должно остаться.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pimur    99

Используйте media запросы с margin. Для компьютеров используйте отрицацельный margin, для мобильных как положено. Как вариант.

Изменено пользователем pimur

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
rim89    9

Дублировать 4ый блок и скрывать его же 

<div class="test">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-8">
                1
            </div>
            <div class="col-xs-12 col-md-4">
                3
                <div class="hidden-xs hidden-sm">
                    4
                </div>
            </div>
            <div class="col-xs-12 col-md-8">
                2
            </div>
            <div class="col-xs-12 col-md-4 hidden-md hidden-lg">
                4
            </div>
        </div>
    </div>
</div>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
newjey    1

 

Дублировать 4ый блок и скрывать его же 

<div class="test">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-8">
                1
            </div>
            <div class="col-xs-12 col-md-4">
                3
                <div class="hidden-xs hidden-sm">
                    4
                </div>
            </div>
            <div class="col-xs-12 col-md-8">
                2
            </div>
            <div class="col-xs-12 col-md-4 hidden-md hidden-lg">
                4
            </div>
        </div>
    </div>
</div>

 

Ооо, как же я сам не додумался, идеально помоему)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу