휴대 기기의 왼쪽에 부트 스트랩 공간이 표시됩니다.

Question

아이폰 6에서 테스트 중이며 페이지 왼쪽에 공백이 표시됩니다. 여기 내 코드는 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">입니다.

<div class="container-fluid"> 
    <h3 class="col-xs-12">title</h3> 
    <div class="row"> 
    <ul> 
     <li class="col-xs-12 green-box"> 
     <img class="col-xs-12" src="img1.jpg"> text text text 
     </li> 
     <li class="col-xs-12 green-box"> 
     <img class="col-xs-12" src="img2.jpg"> text text text 
     </li> 
    </ul> 
    </div> 
</div> 

css : 미디어 화면을 320px로 설정했습니다. ul 0의

ul{ 
     list-style-type:none 
    } 


    li{ 
     margin-bottom: 50px; 
     background-color: pink; 
    } 

    .green-box{ 
    text-justify: inter-word; 
    width: 100%; 
    font-size: 1.1em; 
    } 

Answer 1

설정 패딩과는 <div class="row"> 내부의 <h3을 넣어. 보고

이

ul{ 
 
    padding:0; 
 
    list-style-type:none; 
 
} 
 
li{ 
 
    margin-bottom: 50px; 
 
    background-color: green; 
 
} 
 
.green-box{ 
 
    text-justify: inter-word; 
 
    width: 100%; 
 
    font-size: 1.1em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <h3>Title</h3> 
 
    <ul> 
 
     <li class="col-xs-12 green-box"> 
 
     <img class="col-xs-12" src="img1.jpg"> text text text 
 
     </li> 
 
     <li class="col-xs-12 green-box"> 
 
     <img class="col-xs-12" src="img2.jpg"> text text text 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

세트 패딩 : 0; 여백 : 0; CSS의 ul 섹션에서 문제가 해결됩니다.

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

li { 
    margin-bottom: 50px; 
    background-color: green; 
} 

.green-box { 
    text-justify: inter-word; 
    width: 100%; 
    font-size: 1.1em; 
} 

모바일에이 페이지를 볼 때 모바일에 직면 문제 :