web-dev-qa-db-ja.com

Bootstrapテーマの「コンテンツ」領域に2つのブロックを並べて追加するにはどうすればよいですか？

次のように表示したいBootstrapテーマの "Content"リージョンの最初のページにブロックビューがあります。

 _________________
|                 |
| another block   |
|_________________|
|        |        |
| block1 | block2 |
|________|________|

（行と列を使用したグリッドレイアウトを使用してBootstrapとして）block1/block2にfloatの左/右を使用せずに、これを簡単に行う方法はありますか？

通常のBootstrap構文では、block1が最初の<div class='col-md-6'>要素とblock22番目の<div class='col-md-6'>に移動して、2つのブロックが同じサイズの列として表示されるようにします。

リージョンがthemes/contrib/bootstrap/templates/system/page.html.twigにレイアウトされているのがわかります。

目的のレイアウトを実現する簡単な方法がない場合、page 2を定義するtwigサブテーマで、page.html.twigのようなBootstrapテンプレートを何らかの方法で作成する必要がありますか？既存の「コンテンツ」領域の下のサイド領域（つまり、「サブコンテンツ左」および「サブコンテンツ右」領域）？もしそうなら、これはどのように行われ、テンプレートを特定のページに適用させるのですか？

私は Bootstrap Layouts と Display Suite を調べましたが、2つを統合して上記を実現する方法は明確ではありませんでした。

よろしくお願いします。

8blocksregionstheming
1
kvjava1

このようにページを拡張できますtwig.

テーマテンプレートフォルダーにpage.html.twigのコピーを作成し、コンテンツをtwigブロックで囲みます。

page.html.twig

...
{% block content %}

  {{ page.content }}

{% endblock %}
...

次に、新しいファイルを作成し、特定のページをターゲットとするように名前を付けます（たとえば、ビュー "myview"）。

page--view--myview.html.twig

{% extends "page.html.twig" %}

{% block content %}

  {{ page.content }}

  <div class="..">
    {{ page.subleft }}
  </div>

  <div class="..">
    {{ page.subright }}
  </div>

{% endblock %}

この新しいファイルは、ページtwigを拡張し、twig block "content"の新しいバージョンのみを含みます。複数のtwig 1つのファイル内のブロックを置き換えます。

1
4k4

drupal 8の block attributes モジュールがあり、そのモジュールでdrupalのブロックに属性を付けることができます。

  1. ブロック属性モジュールをインストールして有効にするだけで、
  2. 次に、ブロック構成ページからブロックのクラス値を指定できます。bootstrapを使用しているため、「col-md-6」または ブートストラップのグリッドのいずれかを追加します ブロック構成の属性フィールドのクラス。

コードでカスタム変更を加えなくても問題が解決することを願っています。

1
Leopathu

これは、BootstrapまたはFoundationなどのグリッドフレームワークを使用して行うことができます。

www.drupal.org/project/blockgroup
www.drupal.org/project/block_class

最初のモジュールでは、ブロックグループを作成してから、ブロックレイアウトにブロックグループを配置できます。

2番目のモジュールでは、クラスをブロックレイアウトのブロックに配置できます。

新しいブロックグループを作成する：my-group

ブロックレイアウトで、リージョンを探します：ブロックグループ：my-group

3つのブロックを配置する
ブロックa-col-md-12
ブロックb-col-md-6
ブロックc-col-md-6

表示したいリージョン（コンテンツなど）にブロック 'block group：my-group'を配置します

0
stacey.mosier