我正在尝试设置此 html 文件的样式,以便我在侧面有一个面板(成员),在其右侧有图片,每行三排。我的问题是:
如何使包含图像的 Bootstrap 列实际位于 Bootstrap 面板的右侧?
图片的行与行之间有空隙?
下面是我的代码以及它在我的浏览器中的显示方式:
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-3 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Members</h2>
</div>
<div class="panel-body">
<h3 class="panel-title">Faculty</h3>
<h3 class="panel-title">Students</h3>
<h3 class="panel-title">Alumni</h3>
</div>
</div>
</div>
</div>
<!-- vvvvvvvvvvvvvv-FACE OF THE ORG-vvvvvvvvvvvvvv -->
<div class="col-lg-9">
<div class="row">
<div class="col-sm-9 col-md-3 col-lg-3">
<img class="image-rounded" src="img/left2.jpg">
</div>
<div class="col-sm-9 col-md-3 col-lg-3">
<img class="image-rounded" src="img/right.jpg">
</div>
<div class="col-sm-9 col-md-3 col-lg-3">
<img class="image-rounded" src="img/right1.jpg">
</div>
<div class="col-sm-9 col-md-3 col-lg-3">
<img class="image-rounded" src="img/left2.jpg">
</div>
<div class="col-sm-9 col-md-3 col-lg-3">
<img class="image-rounded" src="img/right.jpg">
</div>
<div class="col-sm-9 col-md-3 col-lg-3">
<img class="image-rounded" src="img/right1.jpg">
</div>
</div>
</div>
</div>
感谢您的所有帮助! :)
最佳答案
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Members</h2>
</div>
<div class="panel-body">
<h3 class="panel-title">Faculty</h3>
<h3 class="panel-title">Students</h3>
<h3 class="panel-title">Alumni</h3>
</div>
</div>
</div>
<!-- vvvvvvvvvvvvvv-FACE OF THE ORG-vvvvvvvvvvvvvv -->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-3">
<img class="img-rounded" src="img/left2.jpg">
</div>
<div class="col-sm-3">
<img class="img-rounded" src="img/right.jpg">
</div>
<div class="col-sm-3">
<img class="img-rounded" src="img/right1.jpg">
</div>
</div>
<div class="row">
<div class="col-sm-3">
<img class="img-rounded" src="img/left2.jpg">
</div>
<div class="col-sm-3">
<img class="img-rounded" src="img/right.jpg">
</div>
<div class="col-sm-3">
<img class="img-rounded" src="img/right1.jpg">
</div>
</div>
</div>
</div>
</div>
试试这个代码。我编辑代码。 和 img-rounded css 为空间提供填充或边距。
关于html - 样式 Bootstrap 行和列 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34034524/