2

インデックス ボックスに境界線を追加しようとしていますが、問題があります。

現在、display: inline-table を使用すると境界線が表示されますが、サイズ変更時にデザインが壊れます。

表示ブロックを使用するか、まったく表示しない場合、サイズは完全に変更されますが、境界線と背景色が消えます。

#borda {
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   background-color: #FFFFFF;
   padding-bottom: 50px;
   clear: both;
   display: inline-table;
}

そして私のhtml：

<body>
   <div class="container"> 
      <div id="borda"> 
        <div class="col-md-6"> 
           Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto
        </div>

        <div class="col-md-6">
           Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto
        </div>
      </div>
    </div>
  </div>
</body>

Bootstrap を使い始めたばかりです。

4

1 に答える 1

0

まず、上記のマークアップには 1 つの追加の終了があります。それを修正（削除）します。

次に、常に col-* クラス div を .row div でラップする必要があります。

第 3 に、ブラウザーのサイズを変更したときにレイアウトが適切に機能するように、他のメディア クエリ クラスを指定する必要があります。

これはあなたが必要とするものです：

<div class="container"> 
      <div id="borda"> 
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
               Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto
            </div>

            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
               Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto
            </div>
          </div>
      </div>
    </div>

デモ: http://jsfiddle.net/YhV6k/

于 2013-12-27T21:45:17.973 に答える