（重新）将元素与 Bootstrap 对齐

Question

我编写了一个小网络应用程序，它向用户显示图像和欢迎消息。根据设备的不同，文本应与图像并排放置，或者图像应在一行中居中，而文本应在另一行中居中。代码在 JSF (Bootsfaces) 中，但也可以用普通 HTML.

编写

<b:row>
  <p:graphicImage styleClass="col-md-4 hidden-xs hidden-sm" url="/resources/images/header.png" style="max-height: 200px; max-width: 200px;" />
  <p:graphicImage styleClass="center-block visible-xs visible-sm " url="/resources/images/header.png" style="max-height: 200px; max-width: 200px;" />
  <!-- header -->
  <div class="col-md-8 hidden-xs hidden-sm">
    <h:outputText styleClass="h1" value="#{langRes['index.welcomeHeadline']}" escape="false" />
    <p>
      <h:outputText value="#{langRes['index.welcomeText']}" escape="false" />
    </p>
  </div>
  <div class="text-center visible-xs visible-sm">
    <h:outputText styleClass="h1" value="#{langRes['index.welcomeHeadline']}" escape="false" />
    <p>
      <h:outputText value="#{langRes['index.welcomeText']}" escape="false" />
    </p>
  </div>
</b:row>

根据客户端屏幕大小隐藏和显示 div 是否正确？由于DRY，我不喜欢图像和文本的重复。 ;)

Answer 1

如果我理解正确，那么它是 CSS 媒体查询的用例：

DEMO: http://jsfiddle.net/3k2r6m4b/（尝试将 Demo 或浏览器中的视口大小 window 调整为宽度 less/greater 而不是 500px）

代码示例：

<img src="http://cdn.sstatic.net/Whosebug/img/apple-touch-icon.png?v=41f6e13ade69" class="IMAGE"/>
<div class="TEXT">Text Text Text .......</div>

CSS:

.IMAGE{
    display: inline-block;
    border: 1px solid #BB0000;
    margin-right: 5px;
    vertical-align: middle;
}
.TEXT{
    display: inline-block;
    border: 1px solid #0000BB;
}

@media screen and (max-width: 600px){
    .IMAGE{
        display: block;
        margin-right: 0px;
    }
    .TEXT{
        display: block;
    }
}

（重新）将元素与 Bootstrap 对齐

(Re-)Align Elements with Bootstrap

css

twitter-bootstrap

jsf

bootsfaces