2

ページの右側にウェルを含むスパンを作成しました。そのウェル内で、複数の div class="span__" コマンドを使用して、画像とテキストの多くの行を揃えようとしています。すべてが適切に配置されますが、ウェル内の最初のものによってウェルの外に押し出されます。

<!-- The “well” below is on the right side of the page (other content span=3 is on the left of it) -->

見出し

サポートテキスト


    <!-- Above content is all correctly contained in the well, but I want the content below in the well too, but also want to distribute several lines horizontally. Using the “span=” below, within the “span8 offset0” opened above does distribute the content properly from a horizontal standpoint, but it gets removed from the well. Is there a way, such as a “sub-span” to place content horizontally while still INSIDE the well? Please note, as you can see from the various span= entries below, I’m not looking to just center them.  -->


    <div class="span3 offset2">
    <img src="assets/img/vote211x58.png" alt="vote" width="211" height="58" hspace="7">
    </div>

ボタン左

   <div class="span2 offset0">
     <p></p><a class="btn btn-mini" href="#">Button middle</a>
     </div>

    <div class="span2 offset0">
      <p><a class="btn btn-xlarge" href="#">Button right</a></p>
    </div>
    <!--end line of buttons -->


   <!-- start new line, want all contained in the well, but distributed horizontally -->
    <div class="span2 offset1">
       <p><img src="assets/img/why-green.png" alt="why green" width="32" height="45" hspace="18"></p>
    </div>


    <div class="span1">
    <!--  <a class="btn small" href="#">view stats</a> -->
       <p></p>
    </div>

    <div class="span2 offset1">
      <p><img src="assets/img/why-red.png" alt="why red" width="32" height="45" hspace="16"></p>
    </div>
    <!-- end last line of content I want included in the well -->

    </div>  <!-- closes the well -->
    </div>  <!-- closes the span=8 containing the well  -->


    </div>  <!-- closes the row containing the left span=3 content + the span=8 content holding the well.  THANK YOU FOR YOUR HELP! -->
4

1 に答える 1

1

優れたソリューションではありませんが、状況によっては機能する場合があります。

CSSで新しいウェル（「.well-new」など）を作成し（サイト全体で「ウェル」の他の使用法を台無しにしないように）、下部にはるかに大きなパディングを付けます（パディング：19px 19px 180px 19px;）それに対応して大きな負のマージン-底（私は-168pxを使用しました;）-効果は、井戸の底がはるかに低く伸び、下のコンテンツを井戸に組み込んでいることです。

これがモバイルデバイスのレンダリングにどのように影響するかはわかりません。

より良い答えを歓迎します！

于 2012-06-18T14:42:42.063 に答える