VisualStrapのvs:column内でコンポーネントを使ってみたときにエラーに遭遇したので、検証用のコードを用意して動作確認してみました。
まず、次のような書き方をしたときにはコンポーネントは問題無く表示されます。
<apex:page showHeader="true" sidebar="false"> <style> .divStyle { background-color: #717ECD; color: white; border: 1px solid #FFFFFF; padding: 20px; } </style> <vs:importVisualStrap theme="default" /> <apex:form id="vsform"> <vs:visualStrapBlock > <vs:row> <vs:column type="col-md-12"> <div class="divStyle">col-md-12</div> </vs:column> </vs:row> <vs:row> <vs:column type="col-md-6"> <div class="divStyle">col-md-6</div> </vs:column> <vs:column type="col-md-6"> <div class="divStyle">col-md-6</div> </vs:column> </vs:row> </vs:visualStrapBlock > <!-- コンポーネント --> <c:VS_ColumnDemoComponent /> </apex:form> </apex:page>
ちなみにコンポーネントは文字を表示するだけのシンプルな作りです。
<apex:component > <style> .componentDivStyle { background-color: #D96383; color: white; border: 1px solid #FFFFFF; padding: 20px; } </style> <div class="componentDivStyle">Component</div> </apex:component>
このコンポーネントを次のように"col-md-12"の部分に入れてみます。
<vs:visualstrapblock > <vs:row > <vs:column type="col-md-12"> <!-- コンポーネント --> <c:VS_ColumnDemoComponent /> </vs:column> </vs:row> <vs:row > <vs:column type="col-md-6"> <div class="divStyle">col-md-6</div> </vs:column> <vs:column type="col-md-6"> <div class="divStyle">col-md-6</div> </vs:column> </vs:row> </vs:visualstrapblock>
これで画面を表示させてみると次のようにエラーが発生しました。
このようにvs:column内ではコンポーネントは認識されないみたいです。普通に使うときには特に問題ないのですが、VisualStrapと一緒にコンポーネントを使いたいときには、このようなルールがあるということを意識しておいた方が良さそうです。