Responsive Bootstrap列表

我正在构建一个包含Bootstrap最新版本的网站，除了一些小小的抱怨之外，大多数情况下都不错。Responsive Bootstrap列表

主要的是我的名单。我有两个清单，可以精细到768px宽。之后，即使有足够的空间让它们以内联方式出现，它们也会叠加。

这只是一个令人讨厌的小东西，我想排序。

代码为我的列表：

<!DOCTYPE html> 
<html lang="en"> 
<head> 

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>AGHicks Homepage</title> 
    <link href="css/stylesheet.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 

      <div class="row-fluid"> 
       <div class="span5"> 
        <ul> 
         <li><strong>Conservatories</strong></li> 
         <li><strong>Extensions</strong></li> 
         <li><strong>Window & Door Refits</strong></li> 
         <li><strong>Bricklaying</strong></li> 
         <li><strong>Driveways</strong></li> 
         <li><strong>Carpentry</strong></li> 
         <li><strong>Patios</strong></li> 
         <li><strong>Stonework</strong></li> 
        </ul> 
       </div> 
       <div class="span6 offset1"> 
        <ul> 
         <li><strong>Plastering</strong></li> 
         <li><strong>Kitchen & Bathroom Refits</strong></li> 
         <li><strong>Tiling</strong></li> 
         <li><strong>Fencing</strong></li> 
         <li><strong>Fascias</strong></li> 
         <li><strong>Garages & Carports</strong></li> 
         <li><strong>Guttering</strong></li> 
        </ul> 
       </div> 
      </div> 
    </body>

来源

2013-02-03 mildrenben

通过堆叠起来你的意思是文字重叠？如果是这种情况，则可以使用媒体查询在屏幕大小更改时更改排版的大小。

看到下面的小提琴和调整（使更小）右下方的窗格，以查看字体大小更改。

示例代码：

@media only screen and (min-width: 1100px) { 
    body { font-size:120%;} 
    .wrap {max-width:770px;} 
} 

@media only screen and (max-width: 800px) { 
    body { font-size:100%;} 
} 

@media only screen and (max-width: 400px) { 
    body { font-size:75%;} 
}

Fiddle.

来源

2013-02-04 00:27:57 MattSull

Responsive Bootstrap列表

回答

相关问题