Question

我有一排带有制造商名称的自行车图像，这些图像出现在彼此之上。查看截图以供参考。我正在使用“col-md-12”所以不应该是水平而不是垂直，因为我使用了所有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;{{"Andy's 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 class="col-md-12">
                <!-- you missed md from offset, end class not needed -->
                <div class="products" ng-controller="BikeController">
                  <div ng-repeat="product in products">
                  {{product.manufacturer}}
                  <br>
                  <img id="bikePic" ng-src="{{product.image}}">
                  </div>

                </div>
            </div>
        </div>


    </div>



    <script src="bower_components/angular/angular.js"></script>
    <script src="app.js"></script>
</body>

</html>

app.js

    var app = angular.module('formApp', []);
app.controller('BikeController',['$scope', function($scope){

$scope.products = [
{
manufacturer: "Trek",
image: 'images/bike1.jpg'
}, 
{
manufacturer: "Mongoose",
image: 'images/bike2.jpg'

},
{

    manufacturer: "Portlandia",
image: 'images/bike3.jpg'
},
{

    manufacturer: "Giant",
image: 'images/bike4.jpg'
},
{

    manufacturer: "Framed",
image: 'images/bike5.jpg'
}
];


this.form = {};
this.addForm = function(product){

};

}]);

app.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:red;

font-size:60px;

}
#bikePic{

height:20%;
width:20%;

}

Answer 1

您为每张图片使用的col-md-12告诉DIV跨越12列，这是每行可以拥有的最大列数。

相反，每个div使用较少数量的列以使最大值为12，

e.g。

<div class="row">
<div class="col-md-4">img</div>
<div class="col-md-4">img</div>
<div class="col-md-4">img</div>
</div>

或

<div class="row">
<div class="col-md-2">img</div>
<div class="col-md-2">img</div>
<div class="col-md-2">img</div>
<div class="col-md-2">img</div>
<div class="col-md-2">img</div>
<div class="col-md-2">img</div>
</div>

正如你所看到的 - 所有div总共加起来为12 - 这是一行的宽度。

Answer 2

col-md-12表示该列宽度为12段。 Bootstrap的container宽度为12段，因此您的列是全宽的，因此将垂直堆叠。

请参阅文档here。

如果您想要3列，请使用col-md-4 ...（12/3 = 4）
如果您想要4列，请使用col-md-3 ...（12/4 = 3）
如果您想要6列，请使用col-md-2 ...（12/6 = 2） ...等。

同一容器行中的对象彼此出现

2 个答案: