样式引导行＆amp;列html

Question

我试图设置这个html文件的样式，以便我有一个面板（会员），右边的图片，排成三排。我的问题是：

1. 如何使包含图像的引导列实际位于引导程序面板的右侧？

2. 图像行之间有一些空格？

以下是我的代码及其在浏览器中的显示方式：

 <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>



感谢您的帮助！ ：）

Answer 1

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

试试这段代码。我编辑代码。 和img-rounded css为空间提供填充或边距。