Bootstrap CSS Tile Grid

Question

我在带有类行的div中重复某种瓷砖。它看起来像这样：

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">

  <div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
    <div class="row">
      <div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
        <div style="position: relative;">
          <img src="http://via.placeholder.com/300" />
        </div>
      </div>
      <div class="col-sm-6 col-md-3 col-lg-6">
        <div class="row">
          <div class="col-sm-12">HEADER</h:outputText>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12">TEXT</div>
        </div>
        <div class="row">
          <div class="col-sm-6"><button>stuff</button></div>
        </div>
      </div>
    </div>

    <div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
      <div class="row">
        <div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
          <div style="position: relative;">
            <img src="http://via.placeholder.com/300" />
          </div>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-6">
          <div class="row">
            <div class="col-sm-12">HEADER</h:outputText>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">TEXT</div>
          </div>
          <div class="row">
            <div class="col-sm-6"><button>stuff</button></div>
          </div>
        </div>
      </div>

      <div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
        <div class="row">
          <div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
            <div style="position: relative;">
              <img src="http://via.placeholder.com/300" />
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-6">
            <div class="row">
              <div class="col-sm-12">HEADER</h:outputText>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">TEXT</div>
            </div>
            <div class="row">
              <div class="col-sm-6"><button>stuff</button></div>
            </div>
          </div>
        </div>
















      </div>

＆＃13;

＆＃13;

＆＃13;

它应该如下所示：IMAGE 这基本上意味着无论什么显示尺寸，它应该总是在一行中显示尽可能多的瓷砖。目前，这在移动设备上不起作用。有人知道解决它吗？

Answer 1

这是你在找什么？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
    <div class="col-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
        <div class="row">
            <div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
                <div style="position: relative;">
                    <img src="http://via.placeholder.com/300" />
                </div>
            </div>
            <div class="col-sm-6 col-md-3 col-lg-6">
                <div class="row">
                    <div class="col-sm-12">HEADER</h:outputText>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">TEXT</div>
                </div>
                <div class="row">
                    <div class="col-sm-6"><button>stuff</button></div>
                </div>
            </div>
        </div>
    </div>

    <div class="ccol-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
        <div class="row">
            <div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
                <div style="position: relative;">
                    <img src="http://via.placeholder.com/300" />
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-6">
                <div class="row">
                    <div class="col-sm-12">HEADER</h:outputText>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">TEXT</div>
                </div>
                <div class="row">
                    <div class="col-sm-6"><button>stuff</button></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
        <div class="row">
            <div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
                <div style="position: relative;">
                    <img src="http://via.placeholder.com/300" />
                </div>
            </div>
            <div class="col-sm-6 col-md-3 col-lg-6">
                <div class="row">
                    <div class="col-sm-12">HEADER</h:outputText>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">TEXT</div>
                </div>
                <div class="row">
                    <div class="col-sm-6"><button>stuff</button></div>
                </div>
            </div>
        </div>
    </div>
</div>