我觉得使用 margin 和 padding 会扰乱 Bootstrap 网格，导致它无法在所有设备上运行，因为你离开了网格。如果有人能澄清这一点，那就太棒了。无论如何，我在让左箭头远离 3 辆自行车图像的方式上遇到问题，以使页面上的所有内容都完美居中。我一直在弄乱网格，但无论我做什么，我都无法让左箭头离开第一个自行车图像。请参阅屏幕截图以供引用。任何帮助表示赞赏。 
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1" id="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
<div class="col-md-1" id="rightArrow"><img ng-src="images/rightarrow.png"></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
CSS
.header{
font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{
font-size:60px;
}
.products{
color: #1E90FF ;
text-align:center;
font-size:40px;
}
#bikePic{
height:100%;
width:100%;
}
最佳答案
<img ng-src="images/leftarrow.png">
改为
<img ng-src="images/leftarrow.png" class="img-responsive">
这将添加 max-width: 100%;到你的形象，不会破坏 <div class="col-md-1" id="leftArrow">布局
换句话说，你的问题是导航图像太大:) 我宁愿对导航元素使用绝对定位。 喜欢
#leftArrow{
position: absolute;
left: -40px;
top: 50%;
}
关于css - 在 bootstrap 网格中使用边距和填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38281634/