Bootstrap和居中網頁

我想在Dreamweaver CC中使用Bootstrap製作一個簡單的網頁。我無法弄清楚如何使顯示的網頁在瀏覽器中居中。該頁面保持左對齊。這裏是我嘗試使用代碼：Bootstrap和居中網頁

HTML5 & CSS

#banner { 
 
    background-image: url(../images/2000%20x%20150_Bubble_Final_Crop.jpg); 
 
    height: 150px; 
 
} 
 
body { 
 
    width: 1200px; 
 
} 
 
h1 { 
 
    color: #FFFFFF; 
 
    padding-top: 25px; 
 
    font-family: Cambria, "Hoefler Text", "Liberation Serif", 
 
    Times, "Times New Roman", serif; 
 
    font-size: 58pt; 
 
    text-shadow: 2px 2px 24px #D7DC23; 
 
    text-align: center; 
 
} 
 
.container-fluid { 
 
    margin: 0 auto; 
 

 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Pixinsight Basics</title> 
 
    <!-- Bootstrap --> 
 
    <link href="css/bootstrap.css" rel="stylesheet"> 
 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 

 
    <body> 
 
    <div class="container-fluid"> 
 
    <section class="row"> 
 

 
    <header id="banner"> 
 
    <h1>Pixinsight Basics</h1> 
 
    </header> 
 

 
    <div class="col-sm-6"> 
 
<h3>Heading 3</h3> 
 
    <p>Hello my fellow astronomers. I have chosen to use Pixinsight 
 
as my primary processing software. Like you (probably) I have sifted 
 
around the internet looking for information/tutorials on how to use 
 
Pixinsight. While this is by no means a comprehensive data set on 
 
how to use Pixinsight, it should at least get you up and running. 
 
I have divided this information into 3 distinct processing areas of 
 
interest:</p> 
 
<ul> 
 
    <li> 
 
    <!--[if !supportLists]--><!--[endif]--> 
 
    Calibration</li> 
 
    <li> 
 
    <!--[if !supportLists]--><!--[endif]--> 
 
    Linear</li> 
 
    <li> 
 
    Non–Linear</li> 
 
</ul> 
 
<p>Just click on one of the buttons below and it will 
 
take you to your area of interest.</p> 
 
</div> 
 

 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="js/jquery-1.11.2.min.js"></script> 
 

 

 
    <script src="js/bootstrap.js"></script> 
 
    </section> 
 
    </div> <!--container-fluid--> 
 

 
    </body> 
 
</html>

得到任何幫助。

來源

2016-09-27 Anthony

.container流體獲得該裝置的整個寬度。如果您沒有定義寬度，並且還需要使用全寬度，則不要爲.container-fluid類定義樣式。其他的事情是，如果你不需要使用流體寬度，並且你關注的是固定寬度，那麼使用.container類，它的默認寬度是1170px，如果需要，你可以覆蓋它。 – user2584538

爲了解決這個問題，清除體內的寬度，並增加寬度，以容器流體的結果是這個CSS：

#banner { 
 
    background-image: url(../images/2000%20x%20150_Bubble_Final_Crop.jpg); 
 
    height: 150px; 
 
} 
 
body { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
h1 { 
 
    color: #FFFFFF; 
 
    padding-top: 25px; 
 
    font-family: Cambria, "Hoefler Text", "Liberation Serif", 
 
    Times, "Times New Roman", serif; 
 
    font-size: 58pt; 
 
    text-shadow: 2px 2px 24px #D7DC23; 
 
    text-align: center; 
 
} 
 
.container-fluid { 
 
    margin: 0 auto; 
 
    width: 1200px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>Pixinsight Basics</title> 
 
    <!-- Bootstrap --> 
 
    <link href="css/bootstrap.css" rel="stylesheet"> 
 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 

 
    <body> 
 
    <div class="container-fluid"> 
 
    <section class="row"> 
 

 
    <header id="banner"> 
 
    <h1>Pixinsight Basics</h1> 
 
    </header> 
 

 
    <div class="col-sm-6"> 
 
<h3>Heading 3</h3> 
 
    <p>Hello my fellow astronomers. I have chosen to use Pixinsight 
 
as my primary processing software. Like you (probably) I have sifted 
 
around the internet looking for information/tutorials on how to use 
 
Pixinsight. While this is by no means a comprehensive data set on 
 
how to use Pixinsight, it should at least get you up and running. 
 
I have divided this information into 3 distinct processing areas of 
 
interest:</p> 
 
<ul> 
 
    <li> 
 
    <!--[if !supportLists]--><!--[endif]--> 
 
    Calibration</li> 
 
    <li> 
 
    <!--[if !supportLists]--><!--[endif]--> 
 
    Linear</li> 
 
    <li> 
 
    Non–Linear</li> 
 
</ul> 
 
<p>Just click on one of the buttons below and it will 
 
take you to your area of interest.</p> 
 
</div> 
 

 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="js/jquery-1.11.2.min.js"></script> 
 

 

 
    <script src="js/bootstrap.js"></script> 
 
    </section> 
 
    </div> <!--container-fluid--> 
 

 
    </body> 
 
</html>

來源

2016-09-27 03:45:15

非常感謝Jishnu。訣竅了。不知道它是如何工作的，但我會盡力弄清楚。 – Anthony

使用.container類，而不是將寬度添加到.container-fluid –

是的，右邊，「用於流體定義的容器流體 –

你必須清除體內規則

body { 
    width: 1200px; 
}

並且還有容器流體規則

.container-fluid { 
    margin: 0 auto; 
}

從您的CSS。將類col-sm-6替換爲col-sm-12，並將類text-center添加到此div。如果您想要左右使用類別container而不是container-fluid。選擇是你的。但我建議你使用container班，因爲它符合你的需求。

最終外觀：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Regent</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css/bootstrap.css" rel="stylesheet" /> 
    <style> 
#banner { 
    background-image: url(../images/2000%20x%20150_Bubble_Final_Crop.jpg); 
    height: 150px; 
} 

h1 { 
    color: #FFFFFF; 
    padding-top: 25px; 
    font-family: Cambria, "Hoefler Text", "Liberation Serif", 
    Times, "Times New Roman", serif; 
    font-size: 58pt; 
    text-shadow: 2px 2px 24px #D7DC23; 
    text-align: center; 
} 

    </style> 
</head> 
<body> 

    <div class="container"> 
    <section class="row"> 

    <header id="banner"> 
    <h1>Pixinsight Basics</h1> 
    </header> 

    <div class="col-sm-12 text-center"> 
<h3>Heading 3</h3> 
    <p>Hello my fellow astronomers. I have chosen to use Pixinsight 
as my primary processing software. Like you (probably) I have sifted 
around the internet looking for information/tutorials on how to use 
Pixinsight. While this is by no means a comprehensive data set on 
how to use Pixinsight, it should at least get you up and running. 
I have divided this information into 3 distinct processing areas of 
interest:</p> 
<ul> 
    <li> 
    <!--[if !supportLists]--><!--[endif]--> 
    Calibration</li> 
    <li> 
    <!--[if !supportLists]--><!--[endif]--> 
    Linear</li> 
    <li> 
    Non–Linear</li> 
</ul> 
<p>Just click on one of the buttons below and it will 
take you to your area of interest.</p> 
</div> 


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.2.min.js"></script> 


    <script src="js/bootstrap.js"></script> 
    </section> 
    </div> <!--container-fluid--> 

</body> 
</html>

來源

2016-09-27 05:43:53 Azhar

Bootstrap和居中網頁

回答

相關問題