ブートストラップを使ってチームメンバーセクションを作る方法は？

私はブートストラップに慣れていないので、チームメンバーのセクションを作るという課題があります。私が完了したすべてが、青いエリアの情報だけが各メンバーについて個別に表示され、解決できませんでした。だから私にそれを解決する方法を教えてください。おかげ Team Members ブートストラップを使ってチームメンバーセクションを作る方法は？

出典

2017-12-30 Awais Zafar

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

出典

2017-12-30 19:04:01

' –

私が正しくあなたを理解していれば、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>

出典

2017-12-30 19:05:04 Musa

ブートストラップを使ってチームメンバーセクションを作る方法は？

答えて

関連する問題