无法将图像移至引导网格中的下一个col

debugcn 发表于 Dev

用户名

我正在尝试使用col-md-offset-1插入col-md-offset-1以将内容推向左箭头的右侧，但是内容永远不会移动。我正在尝试使所有内容居中，但左箭头距离第一辆自行车太近。我似乎无法弄清为什么它没有移动，因为我只用了12列。有什么建议么。

的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>&nbsp;{{"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"><img ng-src="images/leftarrow.png"></div>
     <div class="col-md-offset-1"></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"><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;
position:relative;
padding-top:10px;
padding-left:16px;
margin-left:-10px;
 margin-right:-10px;
margin-top:-10px;

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

}
#bikePic, .products {
margin-top:40px;

}

齐姆

您可以将嵌套与网格一起使用，以使12列更小，这是在这种情况下您需要做的，以使整个布局居中...

http://codeply.com/go/4TkFUey6k9

注意：您拥有的CSS替代将无法响应。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。