부트 스트랩을 사용하여 팀 구성원 섹션을 만드는 방법은 무엇입니까?

저는 부트 스트랩에 익숙하지 않아 팀 구성원의 섹션을 만들기 위해 임무를 부여했습니다. 완료 한 모든 항목은 파란색 영역으로 각 회원에 대한 정보가 별도로 표시되며 해결할 수 없습니다. 그래서 해결 방법을 알려주십시오. 감사합니다 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

부트 스트랩을 사용하여 팀 구성원 섹션을 만드는 방법은 무엇입니까?

답변

관련 문제