Drupal 视图水平布局的行

Question

我是 Drupal 主题的新手，我的任务是在首页上显示文章列表。我创建了一个视图，还创建了自定义视图模板，用于可能覆盖样式和标记。我已经准备好响应标记，以便在其中显示 Drupal 文章内容。当前视图将文章图像、标题和 body 显示为垂直列表，我正在尝试使用给定标记水平显示它们。我花了好几个小时试图找出一种方法来做到这一点，但没有成功，我们将不胜感激。布局如下：

可在此处找到标记：

<section class="category-row people-row container">
    <h1><a href="#">Category</a></h1>
    <div class="row">
    <!-- medium article format-->
    <article class="col-md-8 col-xs-12 article-medium pull-left">              <figure><a href="#"><img src="http://xxxx" alt="REPLACE THIS WITH        STORY TITLE"></a></figure>
        <div class="teaser">
            <h2><a href="#">xyz</a></h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
    </article>

    <!--small article format-->
    <article class="col-md-4  col-xs-6 article-small pull-right mpu-holder">
        <h2 class="hide">Advert</h2>
        <div>
            <img src="images/mpu.jpg" width="300" height="250" alt=""/>
        </div>
    </article>

    <!--small article format-->
    <article class="col-md-4  col-xs-6 article-small pull-right">
        <figure><a href="#"><img src="http://xxxx" alt="REPLACE THIS WITH STORY TITLE"></a></figure>
        <div class="teaser">
            <h2><a href="#"> Etiam porta sem malesuada magna mollis euismod sem malesuada magna mollis euismod</a></h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
    </article>

    <!-- link to category listing page-->
    <div class="col-md-12 clearfix">
        <a href="#" class=" more-link">More people stories &#8594;</a>
    </div>

  </div> <!--end row-->

</section> <!-- end container -->

谢谢

莫

Answer 1

您的目标最好通过创建 2 个视图（或更准确地说，为您的视图创建两个显示）来实现。

主要区域显示一个 - 可以设置为只显示第一个结果。
侧边栏显示一个。在第二个视图中，您可以将广告贴在 header 区域，然后将该视图输出为一个块。设置为跳过第一个结果，将在主视图中显示。

然后您可以将这些显示中的每一个嵌入 panels 中，并为每个显示提供不同的上下文。这将允许您根据需要向您的页面添加任意数量的 "sets"，每个显示来自不同分类术语的内容。

Drupal 视图水平布局的行

Drupal view horizontal layout of rows

drupal-views

drupal-7

responsive-design