携帯端末の左側にブートストラップが表示されます

Question

私のiPhone 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：メディアの画面を320ピクセルに設定しました。

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; 
} 

、あなたの携帯電話にこのページを表示するときに、モバイルに直面している問題のスクリーンショットを追加します:)