Protostar: 3 позиции модуля по горизонтали выше и ниже содержимого

Я пытаюсь создать шаблон Joomla Protostar для создания 3 позиций пользовательского модуля выше и ниже области содержимого.

Я добавил позиции в templateDetails.xml. И я решил, что мне нужно добавить позиции в index.php.

Вокруг строки 180 У меня есть этот раздел:

        <main id="content" role="main" class="<?php echo $span; ?>">
            <!-- Begin Content -->
            <jdoc:include type="modules" name="position-3" style="xhtml" />
            <jdoc:include type="message" />
            <jdoc:include type="component" />
            <jdoc:include type="modules" name="position-2" style="none" />
            <!-- End Content -->
        </main>

И тогда, если я прав, мой код для моих верхних позиций будет идти до «сообщения» и внизу после «компонента», используя?

<jdoc:include type="modules" name="position-4" style="xhtml" />

, но не знаете, как это сделать правильно?

Мои пользовательские позиции Нижние A-B-C и Top A-B-C должны быть горизонтально в 3 колонках и заполнять 100% ширины основных секций.

Например, если я поместил модуль только в Bottom-A, то этот модуль заполнит 100% ширины (такой же ширины, как и позиция-2). Если я размещаю модуль, например. Внизу А и В они должны быть 50/50. Если я положу модуль на нижней части А, В и С, они будут на 1/3 ширины (например, на изображении ниже)

Посмотрел этот поток: , как сделать пользовательские позиции стек горизонтально, а не вертикально

Немного изменив код, указанный в этом потоке, дал мне 3 горизонтальных положения, но они не были правильно выровнены с, например, позицией-2, и не функционировали в соответствии с моими пожеланиями.

<div class="row">
    <div class="bottom-a">
        <?php if ($this->countModules('position-9')) : ?>
             <!--custom position 9 'Bottom-A' -->
            <div id="top-2a" class="span3">
                <jdoc:include type="modules" name="position-9" style="xhtml" />
            </div>
             <!-- End Sidebar -->
            <?php endif; ?>
    </div>
    <div class="bottom-b">
        <?php if ($this->countModules('position-10')) : ?>
        <!--custom position 10 'Bottom-B' -->
            <div id="top-2b" class="span3">
                <jdoc:include type="modules" name="position-10" style="xhtml" />
            </div>
        <!-- End Sidebar -->
        <?php endif; ?>
    </div>
    <div class="bottom-c">
        <?php if ($this->countModules('position-11')) : ?>
        <!--custom position 11 'Bottom-C' -->
            <div id="top-2c" class="span3">
                <jdoc:include type="modules" name="position-11" style="xhtml" />
            </div>
        <!-- End Sidebar -->
        <?php endif; ?>
    </div>
</div>

 введите описание изображения здесь>> </a> </p>

<p> <a href= введите описание изображения здесь>> </a> </p>

<p> Любая помощь приветствуется:) </p></body></html>

2 голоса | спросил Hammur 13 52015vEurope/Moscow11bEurope/MoscowFri, 13 Nov 2015 23:19:42 +0300 2015, 23:19:42

1 ответ


3

Пояснение:

Давайте посмотрим, что мы знаем:

  • Bootstrap - это рамочная структура с 12 столбцами.
  • Вы пытаетесь реализовать 3 блока, разделенных поровну в строке

<------------------------span12------------------------>
<------span4------><------span4------><-----span4------>
<----span3---><----span3---><----span3---><----span3--->

12 ÷ 3 = 4


Решение:

Используйте span4 вместо span3

ответил Lodder 14 62015vEurope/Moscow11bEurope/MoscowSat, 14 Nov 2015 02:30:15 +0300 2015, 02:30:15

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132