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

首先，您在上面的标记中有一个额外的关闭。更正（删除）那个。

其次，您应该始终用 .row div 包装 col-* 类 div。

第三，当您调整浏览器大小时，您必须为布局指定其他媒体查询类才能正常工作。

这应该是您需要的：

<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 回答