부트 스트랩 - 내용 Small on Phone

Question

프로젝트 용 웹 사이트를 만들고 있습니다. 나는 웹 사이트에있는 모든 것이 매우 작다는 의미에서 모든 종류의 전화와 "호환"되도록하는 몇 가지 문제를 겪고 있으며, 그 중 일부는 그것이 말하는 것을 읽기 위해 확대되어야합니다.

이 내 현재 코드입니다 :

body, html { 
 
     overflow-x: hidden; 
 
     font-family: 'Montserrat', sans-serif; 
 
    } 
 
    #author__image { 
 
     width: 125px; 
 
     height: 125px; 
 
    border-radius: 50%; 
 
     border: 5px solid white; 
 
     margin-bottom: 10px; 
 
     -webkit-animation-duration: 1.5s; 
 
     -webkit-animation-delay: .5s; 
 
    } 
 
    #profile__name { 
 
     font-family: 'Montserrat', sans-serif; 
 
     -webkit-animation-duration: 1.5s; 
 
     -webkit-animation-delay: .8s; 
 
    } 
 
    #profile__asset { 
 
     color: #CCCCCC; 
 
     text-align: center; 
 
     font-family: 'Hind', sans-serif; 
 
     font-size: 18px; 
 
     -webkit-animation-duration: 1.5s; 
 
     -webkit-animation-delay: 1.1s; 
 
    } 
 
    .header img { 
 
     margin-top: 35vh; 
 
    } 
 
    
 
    .profile__links { 
 
     -webkit-animation-duration: 1.5s; 
 
     -webkit-animation-delay: 1.4s; 
 
    } 
 
    button { 
 
     border-radius: 50%; 
 
     width: 40px; 
 
     height: 40px; 
 
     font-size: 18px; 
 
     margin: 15px 5px 5px 5px; 
 
     background: white; 
 
     border: none; 
 
     cursor: pointer; 
 
    } 
 
    
 
    #twitter { 
 
     color: #55acee; 
 
     background: white; 
 
     border: white 2px solid; 
 
    } 
 
    
 
    #linkedin { 
 
     color: #007cb7; 
 
     background: white; 
 
     border: white 2px solid; 
 
    } 
 
    #github { 
 
     color: #333333; 
 
     background: white; 
 
     border: white 2px solid; 
 
    }

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> 
 
<link href="https://fonts.googleapis.com/css?family=Hind:300" rel="stylesheet" type="text/css"> 
 
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"> 
 
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
 
<link rel="stylesheet" type="text/css" href="css/animate.css"> 
 
<link rel="stylesheet" type="text/css" href="css/index.css"> 
 
<title>Test Website</title> 
 

 
<div class="fluid-container"> 
 
    <div class="row"> 
 
     <section class="module parallax parallax-1"> 
 
      <div class="container header"> 
 
       <div class="col-12 text-center"> 
 
        <img class="animated fadeIn" id="author__image" src="assets/profile_image.jpg"> 
 
       </div> 
 
       <div class="col-12"> 
 
        <h1 class="animated fadeIn" id="profile__name">Lucas Lund Jensen</h1> 
 
       </div> 
 
       <div class="col-12"> 
 
        <p class="animated fadeIn" id="profile__asset">HTML - JAVA - C# DEVELOPER</p> 
 
       </div> 
 
       <div class="col-12 text-center animated fadeIn profile__links"> 
 
        <button id="twitter"> 
 
         <i class="fa fa-twitter" aria-hidden="true"></i> 
 
        </button> 
 
        <button id="linkedin"> 
 
         <i class="fa fa-linkedin" aria-hidden="true"></i> 
 
        </button> 
 
        <button id="github"> 
 
         <i class="fa fa-github" aria-hidden="true"></i> 
 
        </button> 
 
        <button id="email"> 
 
         <i class="fa fa-envelope-o" aria-hidden="true"></i> 
 
        </button> 
 
       </div> 
 
      </div> 
 
     </section> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="js/parallax.js"></script>

Answer 1

HTML의 head 태그에 메타 태그를 추가해야합니다.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

당신은 아마뿐만 아니라 당신의 CSS에서 이것을 할 것입니다 :

@-ms-viewport{ 
    width: device-width; 
} 

Answer 2

당신은 class="col-sm-12" 대신 class="col-12" 비슷한 있어야합니다. w3 학교 부트 스트랩을 확인하십시오 : http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Answer 3

당신은 클래스를 수정해야와 유체 컨테이너를 컨테이너 유체 첫 번째 오류

Answer 4

에게 적어도입니다

row 클래스 안에 cols을 입력해야합니다. 이 편집 된 코드를 살펴보십시오.

<div class="container-fluid"> 
<div class="row"> 
    <section class="module parallax parallax-1"> 
     <div class="container header"> 
      <div class="row"> 
      <div class="col-md-12 text-center"> 
       <img class="animated fadeIn" id="author__image" src="assets/profile_image.jpg"> 
      </div> 
      <div class="col-md-12"> 
       <h1 class="animated fadeIn" id="profile__name">Lucas Lund Jensen</h1> 
      </div> 
      <div class="col-md-12"> 
       <p class="animated fadeIn" id="profile__asset">HTML - JAVA - C# DEVELOPER</p> 
      </div> 
      <div class="col-md-12 text-center animated fadeIn profile__links"> 
       <button id="twitter"> 
        <i class="fa fa-twitter" aria-hidden="true"></i> 
       </button> 
       <button id="linkedin"> 
        <i class="fa fa-linkedin" aria-hidden="true"></i> 
       </button> 
       <button id="github"> 
        <i class="fa fa-github" aria-hidden="true"></i> 
       </button> 
       <button id="email"> 
        <i class="fa fa-envelope-o" aria-hidden="true"></i> 
       </button> 
      </div> 
     </div> 
     </div> 
    </section> 
</div>