1

流動的なレイアウトを作成するためにブートストラップ2.0を使用しています。ただし、ブラウザのサイズを変更したり、iPhoneから表示したりすると、問題が発生します。

サムナニルブレイクバス

これは私のマークアップです：

      <div id="features" class="row-fluid">
        <div class="span12">
          <ul class="thumbnails">
            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Orders" />
                <h3>Pedidos</h3>
                <p>Genera ordenes de pedidos para su facturacion posterior</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Invoices" />
                <h3>Facturas</h3>
                <p>Factura las ventas realizadas</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Customers" />
                <h3>Clientes</h3>
                <p>Ingrese & actuelize los datos de los clientes</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Products & Stock" />
                <h3>Productos</h3>
                <p>Ingrese & actuelize los datos de los productos y su inventario</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Sincronization with ERP" />
                <h3>Impresion</h3>
                <p>Genera impresion de tiquets en papel con la impresora P25</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Sincronization with ERP" />
                <h3>Sincronizacion</h3>
                <p>Sincroniza los datos con ERPs seleccionados</p>
              </div>
            </li>
          </ul>
        </div><!--/span-->   
      </div><!--/row-->

（CSSがゼロの同じマークアップも壊れてしまいます）

私はCSSで幅/高さを入れようとしましたが、それは流れを壊します。

4

2 に答える 2

1

まったく同じサイズで均等に分散された画像を使用していない限り、魔法のブーストラップがどれほど優れていても、純粋なcssで課題を解決することは非常に困難です。.row流動的なスタイルが悪いブレークを引き起こしているかどうかを確認する代わりにを使用してみることが.row-fluidできますが、それを超えて、「防弾」が必要な場合はjavascriptの使用を検討する必要があります。

多分次のようなもの：masonry.jsまたはIsotope

于 2012-04-12T08:31:39.663 に答える
1

Bootstrapはレスポンシブサポートを備えており、3.0Branchはデフォルトでそれをサポートします。

于 2013-02-12T14:36:17.377 に答える