引导行宽

-2

我有以下HTML：引导行宽

<!DOCTYPE HTML> 
<html> 

<head> 
    <link rel="stylesheet" href="STYLE.css"> 
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
</head> 

<body> 
    <header class="row"></header> 

    <section class="row section1"></section> 
    <section class="row section2"></section> 
    <section class="row section1"></section> 
    <section class="row section2"></section> 
    <section class="row section1"></section> 

    <footer class="row"></footer> 
</body> 

</html>

出于某种原因，整个网页比浏览器窗口更宽。当我删除row课程时，一切都恢复正常。本地CSS文件与该问题无关。我的猜测是bootstrap CSS以某种原因修改了行的宽度。所以我想问问任何人是否有任何想法可以解决这个问题。

来源

2015-10-20 Adrian Devder

您正在使用没有在其周围包装容器的行。 http://getbootstrap.com/css/#overview-container –

您可以使用.container类或.container-fluid。 .container从实际屏幕上保留一些边距空间，并且不会拉伸页面视图。另一方面，容器流体尽可能延伸页面。见你的HTML脚本如下修改：

<!DOCTYPE HTML> 
<html> 

<head> 
    <link rel="stylesheet" href="STYLE.css"> 
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
</head> 

<body> 
<div class="container"> 
    <header class="row"></header> 
    <section class="row section1"></section> 
    <section class="row section2"></section> 
    <section class="row section1"></section> 
    <section class="row section2"></section> 
    <section class="row section1"></section> 

    <footer class="row"></footer> 
</div> 
</body> 

</html>

此外，您必须使用.COL-MD-6级一样的行其中MD是由LG和SM以及更换内指定部分的宽度。

md代表中型设备像笔记本电脑，台式机等

lg代表大尺寸的装置像投影机或一些更大的屏幕等，为小尺寸的设备像手机等

sm看台

您可以自由使用这三种的组合。例如，

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6 col-sm-1 col-lg-12"> 

     </div> 
    </div> 
</div>

希望它可以帮助您开始并解决您的问题。

来源

2015-10-20 10:27:24

也许你必须添加引导CSS的网格？

看看这个例子

http://getbootstrap.com/examples/grid/

来源

2015-10-20 10:06:06

要解决这个问题，你必须使用类row正常。

您尚未将类别row与类别container包装在一起。

Bootstrap提供了grid system。

Bootstrap的网格系统允许在页面上多达12列。你需要将你的页面宽度排列成12列。

这里无法解释全部。请参考以下链接。

Bootstrap grid template

Bootstrap grids

来源

2015-10-20 10:07:13 WisdmLabs

您必须使用容器使用任何的引导功能。这可以是一个固定宽度的容器或流体容器，但添加一个可以解决您的问题。我也切换你的风格，使用工作CDN版本，并将Javascript移到推荐位置。你可能会发现这是一个更好的起点。

参考：http://getbootstrap.com/css/#overview-container和http://getbootstrap.com/css/#grid

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Bootstrap Case</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
</head> 
<body> 
    <div class="container-fluid"> 
     <header class="row">Test 1</header> 

     <section class="row section1">Test 2</section> 
     <section class="row section2">Test 3</section> 
     <section class="row section1">Test 4</section> 
     <section class="row section2">Test 5</section> 
     <section class="row section1">Test 6</section> 

     <footer class="row">Test 7</footer> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body> 
</html>

来源

2015-10-20 10:09:47

请把它引导.container类，然后检查是否问题仍然存在。

<body> 
<div class="container"> 
    //your content goes here 
</div> 
</body>

来源

2015-10-20 10:14:44

回答

相关问题