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

设置填充：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;
}

享受：）

Answer 2

设置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>