Question

由于我是新手，因此我已经指派了一部分团队成员。我已经完成的所有内容，但只有蓝色区域，其中显示有关每个成员的信息，我无法解决。所以请告诉我如何解决它。谢谢 Team Members

Answer 1

        <style>
    .row{ background-color: brown; }
    .col-md-3 img{ height:325px; width: 100%; padding-top: 25px; padding-bottom: 25px;}

    .text-block {
        height: 100px;
        width: 90%;
    position: absolute;
    bottom: 25px;
    right: 15px;
    background-color: #30374d;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    clip-path: polygon(-36% 100%, 100% 100%, 100% 1%);
    opacity: 0.9;
}
.name{ padding-top: 25px; }
    </style>
</head>
<body>
<div class="container-fluid">

        <div class="row">
            <div class="container">
            <div class="col-md-3"> 
                <img src="https://s3.amazonaws.com/37assets/svn/1065-IMG_2529.jpg"> 
                  <div class="text-block text-right">
                     <h4 class="name">NAME</h4>
                        <p>Join Date</p>
                  </div>
             </div> 
            <div class="col-md-3"> 
                <img src="https://s3.amazonaws.com/37assets/svn/1065-IMG_2529.jpg"> 
                  <div class="text-block text-right">
                     <h4 class="name">NAME</h4>
                        <p>Join Date</p>
                  </div>
            </div> 
            <div class="col-md-3"> 
                <img src="https://s3.amazonaws.com/37assets/svn/1065-IMG_2529.jpg"> 
                   <div class="text-block text-right">
                     <h4 class="name">NAME</h4>
                        <p>Join Date</p>
                  </div>
            </div> 
            <div class="col-md-3"> 
                <img src="https://s3.amazonaws.com/37assets/svn/1065-IMG_2529.jpg"> 
                   <div class="text-block text-right">
                     <h4 class="name">NAME</h4>
                        <p>Join Date</p>
                  </div>
            </div>
            </div>
            </div> 
        </div> 
</div>

Answer 2

如果我理解正确，使用bootstrap3，您可以尝试以下方法：

<div class="row">
  <div class="col-md-3">
    <img src="your-image.png">
  </div>
  <div class="col-md-3">
    <img src="your-image.png">
  </div>
  <div class="col-md-3">
    <img src="your-image.png">
  </div>
  <div class="col-md-3">
    <img src="your-image.png">
  </div>
  <div class="col-md-3">
    <img src="your-image.png">
  </div>
</div>

如何使用bootstrap制作团队成员部分？

2 个答案: