부트 스트랩 및 웹 페이지 센터링

부트 스트랩을 사용하여 Dreamweaver CC에서 간단한 웹 페이지를 만들려고합니다. 표시된 웹 페이지를 브라우저의 중앙에 배치하는 방법을 알 수 없습니다. 페이지가 왼쪽 정렬됩니다.부트 스트랩 및 웹 페이지 센터링

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에 너비를 추가하십시오. –

예,'fluid-desgins 용 컨테이너 - 유체 –

당신은 몸 규칙을

를 제거해야

body { 
    width: 1200px; 
}

및 또한 용기 - 유체 규칙

.container-fluid { 
    margin: 0 auto; 
}

col-sm-6 클래스를 col-sm-12으로 대체하고 text-center 클래스를이 div에 추가하십시오. 왼쪽 및 오른쪽에 여백이 필요하면 container-fluid 대신 container 클래스를 사용하십시오. 선택은 당신 것입니다. 그러나 당신의 필요에 부합하기 때문에 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

부트 스트랩 및 웹 페이지 센터링

답변

관련 문제