Html Bootstrap 3.3.7 md上的列布局问题
这是我的引导网站的当前布局。不幸的是,它不工作,因为列完全关闭了md大小 是当前视图 我的目标是将它们按md大小的2列进行分组。因此,布局将是Html Bootstrap 3.3.7 md上的列布局问题,html,css,twitter-bootstrap-3,responsive-design,responsive,Html,Css,Twitter Bootstrap 3,Responsive Design,Responsive,这是我的引导网站的当前布局。不幸的是,它不工作,因为列完全关闭了md大小 是当前视图 我的目标是将它们按md大小的2列进行分组。因此,布局将是图像+文本;新栏目;图像+文本;新栏目;图像+文本 <div class="row"> <div class="col-lg-4 col-md-6 coko"> <img src="images/malinica.jpg" class="img-respo
图像+文本;新栏目;图像+文本;新栏目;图像+文本
<div class="row">
<div class="col-lg-4 col-md-6 coko">
<img src="images/malinica.jpg" class="img-responsive img-rounded" alt="Cokol">
<a class="link" href="#"><div class="preko">
<h3 class="text-center">Cakes</h3></div></a>
</div>
<div class="col-lg-4 col-md-6 coko">
<p class="text-center">In 1995, <a href="index.html">The Rolling Pin</a>
opened its first location on a quiet street corner in the heart of
Munich. From its inception, The Rolling Pin has been cherished for its
classic Germany baked goods, vintage decor and warm, invitig atmosphere.
</p>
</div>
<div class="col-lg-4 coko col-md-6">
<img src="images/cupcake.jpg" class="img-responsive img-rounded" alt="Coko">
<a class="link" href="#"><div class="preko">
<h3 class="text-center">Muffins</h3>
</div></a>
</div>
</div>
<div class="row">
<div class="col-lg-4 coko col-md-6">
<h3 class="text-center">We stand for organic</h3>
<p class="text-center">The Rolling Pin has a whole line of organic
desserts and drinks that prove that eating organic can taste just as
delicious.</p>
</div>
<div class="col-lg-4 col-md-6 coko">
<img src="images/kafa.jpg" class="img-responsive img-rounded" alt="Coko">
<a class="link" href="#"><div class="preko">
<h3 class="text-center">Drinks</h3>
</div></a>
</div>
<div class="col-lg-4 col-md-6 coko">
<h3 class="text-center">Pet friendly</h3>
<p>If you have a dog or cat, this is the right place for
you. Except our place, we offer you a special menu for your pet.</p>
</div>
</div>
1995年,
在伦敦市中心一个安静的街角开了第一家店
慕尼黑。从一开始,滚动销就因其独特的性能而受到人们的珍视
经典的德国烘焙食品,复古的装潢和温暖,充满活力的气氛。
我们主张有机食品
滚动销有一整条有机线
甜点和饮料证明,吃有机食品的味道也一样
好吃
爱宠
如果你有一只狗或猫,这是适合你的地方
你。除了我们的地方,我们为您的宠物提供特别菜单
这是因为最小高度问题。添加额外的div
和min height
或
为您的.coko
分区添加min height
。这是因为min height
问题。添加额外的div
和min height
或
为您的.coko
分区添加min height
。看看这是否有帮助:
这样的布局有两个挑战
首先,您希望所有元素都位于同一行中,其次,您需要考虑不同高度的列。第n个子选择器和一些@media选择器是操纵CSS并使其工作的有效方法
HTML-这与您的完全相同,只是有几行注释掉了,所以所有元素都在同一行中
<div class="row">
<div class="col-lg-4 col-md-6 coko">
<img src="http://www.fillmurray.com/500/400" class="img-responsive img-rounded" alt="Cokol">
<a class="link" href="#">
<div class="preko">
<h3 class="text-center">Cakes</h3>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 coko">
<p class="text-center">In 1995, <a href="index.html">The Rolling Pin</a> opened its first location on a quiet street corner in the heart of Munich. From its inception, The Rolling Pin has been cherished for its classic Germany baked goods, vintage decor and warm, invitig
atmosphere.
</p>
</div>
<div class="col-lg-4 coko col-md-6">
<img src="http://www.fillmurray.com/500/200" class="img-responsive img-rounded" alt="Coko">
<a class="link" href="#">
<div class="preko">
<h3 class="text-center">Muffins</h3>
</div>
</a>
</div>
<!-- </div> -->
<!-- <div class="row"> -->
<div class="col-lg-4 coko col-md-6">
<h3 class="text-center">We stand for organic</h3>
<p class="text-center">The Rolling Pin has a whole line of organic desserts and drinks that prove that eating organic can taste just as delicious.
</p>
</div>
<div class="col-lg-4 col-md-6 coko">
<img src="http://www.fillmurray.com/500/300" class="img-responsive img-rounded" alt="Coko">
<a class="link" href="#">
<div class="preko">
<h3 class="text-center">Drinks</h3>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 coko">
<h3 class="text-center">Pet friendly</h3>
<p>If you have a dog or cat, this is the right place for you. Except our place, we offer you a special menu for your pet.</p>
</div>
</div>
祝你好运 看看这是否有帮助:
这样的布局有两个挑战
首先,您希望所有元素都位于同一行中,其次,您需要考虑不同高度的列。第n个子选择器和一些@media选择器是操纵CSS并使其工作的有效方法
HTML-这与您的完全相同,只是有几行注释掉了,所以所有元素都在同一行中
<div class="row">
<div class="col-lg-4 col-md-6 coko">
<img src="http://www.fillmurray.com/500/400" class="img-responsive img-rounded" alt="Cokol">
<a class="link" href="#">
<div class="preko">
<h3 class="text-center">Cakes</h3>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 coko">
<p class="text-center">In 1995, <a href="index.html">The Rolling Pin</a> opened its first location on a quiet street corner in the heart of Munich. From its inception, The Rolling Pin has been cherished for its classic Germany baked goods, vintage decor and warm, invitig
atmosphere.
</p>
</div>
<div class="col-lg-4 coko col-md-6">
<img src="http://www.fillmurray.com/500/200" class="img-responsive img-rounded" alt="Coko">
<a class="link" href="#">
<div class="preko">
<h3 class="text-center">Muffins</h3>
</div>
</a>
</div>
<!-- </div> -->
<!-- <div class="row"> -->
<div class="col-lg-4 coko col-md-6">
<h3 class="text-center">We stand for organic</h3>
<p class="text-center">The Rolling Pin has a whole line of organic desserts and drinks that prove that eating organic can taste just as delicious.
</p>
</div>
<div class="col-lg-4 col-md-6 coko">
<img src="http://www.fillmurray.com/500/300" class="img-responsive img-rounded" alt="Coko">
<a class="link" href="#">
<div class="preko">
<h3 class="text-center">Drinks</h3>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 coko">
<h3 class="text-center">Pet friendly</h3>
<p>If you have a dog or cat, this is the right place for you. Except our place, we offer you a special menu for your pet.</p>
</div>
</div>
祝你好运