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列表

回答

相關問題