Question

我正在使用最新版本的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>

Answer 1

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

请参阅下面的小提琴并调整（缩小）右下方窗格以查看字体大小更改。

示例代码：

@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.

响应式Bootstrap列表

1 个答案: