Question

我需要制作一张卡片，在这里的图像上同样如下：

这是我的代码：

HTML

<body>
<xml3d class="xml3d" view="#defaultView">
    <defs>
      <!-- camera position -->
      <transform id="t_camera" translation="0 0 40" rotation="0 1 0 0"></transform>
      <transform id="m_transform" scale="0.1 0.1 0.1"></transform>
      <transform id="t_Lamp" translation="0 0 -400"></transform>
      <transform id="r_Lamp" rotation="1 0 0 -0.2"></transform>

      <!-- permanent light -->
      <lightshader id="ls_directional" script="urn:xml3d:lightshader:directional">
          <float3 name="intensity">0.6 0.6 0.6</float3>
      </lightshader>
      <transform id="t_directional" rotation="1 0 0 -0.2" />
      <!-- //permanent light -->
    </defs>

    <!-- Our viewpoint from where we see the 3D content -->
    <group id="viewGroup" transform="#t_camera">
        <view id="defaultView"></view>
    </group>

    <!-- permanent light -->
    <group transform="#t_directional">
        <light shader="#ls_directional"></light>
    </group>
    <!-- //permanent light -->

     <!-- our model include -->
    <group transform="#m_transform">
     <model id="xmlmodel" src="ciccio.xml#ciccio"></model>
    </group>
</xml3d>
</body>
<script>
  // attach event to the mesh
document.querySelector("#xmlmodel").addEventListener("click", function() {
    var model = document.getElementById("xmlmodel");
    alert("my center is " + model.getLocalBoundingBox().center().toDOMString());
});
</script>

 <section>
  <div class="download-section">
    <div class="container">

CSS

          <div id="raise" class="btn-group btn-group-lg" role="group">
            <button type="button" class="btn btn-primary">View Details</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

我正在尝试制作卡片，但我看不到桌子边界。我正在使用Bootstrap-3。有人能帮我吗？我该怎么办呢。

Answer 1

我认为你想要的方法......这样的事情：

我们有一个容器，里面有一个行，其中包含3个 cols 。总和必须为12，因此我们添加3 col-md-4。

<强> HTML

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="panel mycard">
          <div class="panel-body">
            <p>Here goes some beautiful text</p>
            <button type="button" class="btn btn-primary">View Details</button>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel mycard">
          <div class="panel-body">
            <p>Here goes some beautiful text</p>
            <button type="button" class="btn btn-primary">View Details</button>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel mycard">
          <div class="panel-body">
            <p>Here goes some beautiful text</p>
            <button type="button" class="btn btn-primary">View Details</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<强> CSS

.mycard {
  border: 1px solid #ccc;
  text-align: center;
}

如何在图像上制作卡片

1 个答案: