Bootstrap показывает места на левой стороне на мобильном устройстве

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{ 
     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

Комплект Обивка ul 0 и положить <h3 внутри <div class="row">. Посмотрите

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; margin: 0; для секции ul в css это устранит вашу проблему.

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

Наслаждайтесь скриншот добавить :)