引導行寬

-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

回答

相關問題