Дизайн в бутстрапе - PullRequest
Новая
       2

Дизайн в бутстрапе

0 голосов
/ 06 мая 2018

Я новичок в начальной загрузке. Кто-нибудь может мне помочь с адаптивным дизайном, подобным этому изображению, с использованием начальной загрузки CSS.

enter image description here

Мой HTML-код 

<div class="row recommended-story">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 card-lst">
        <div class="pull-left img-block">
            <img class="" src="https://randomuser.me/api/portraits/men/82.jpg">
         </div> 
         <div class="card-descriptions pull-left">
             <h4><p class="card-ttl">Lorem ipsum dolor sit amet</p></h4>
                 <div class="usr-description">
                     <span class="pull-left">Bipin Fultariya</span>
                     <span class="pull-right">4 min read</span>
                 </div>
             </div> 
           </div>
        </div>

1011 * CSS * 

.recommended-story {
    padding-bottom: 20px;
}

.recommended-story .img-block img {
    height: 120px;
    width: 80px;
    border-radius: 4px;
}

.recommended-story .card-lst {
    padding-left: 0;
    background: #fff;
}

.recommended-story .card-descriptions {
    padding: 5px 14px;
}


.recommended-story {
    padding-bottom: 20px;
}

.recommended-story .img-block img {
    height: 120px;
    width: 80px;
    border-radius: 4px;
}

.recommended-story .card-lst {
    padding-left: 0;
    background: #fff;
}

.recommended-story .card-descriptions {
    padding: 5px 14px;
}
<div class="row recommended-story">
                    <div class="col-sm-6 col-md-6 col-xs-6">
                        <div class="thumbnail" style="border:none; background:white;">
                            <div class="col-sm-6 col-md-6 col-xs-12 image-container">
                                <img src="https://randomuser.me/api/portraits/men/82.jpg" />
                            </div>
                            <div class="col-sm-6 col-md-6 col-xs-12">  
                                <h3>Hello World</h3>
                                <p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.   </p>
                            </div>
                        </div>
                   </div>
                </div>

Ответы [ 2 ]

0 голосов
/ 06 мая 2018 
<div class="col-sm-6 col-md-6 col-xs-6">
                        <div class="thumbnail" style="border:none; background:white;">
                            <div class="width" style="
    display:  inline-block;
">
                                <img src="https://randomuser.me/api/portraits/men/82.jpg" style="
    display:  inline-block;
">
                            </div>
                            <div class="width-image" style="
    display:  inline;
    margin-top: 0;
    position:  absolute;
    padding-left: 16px;
    top: -10px;
">  
                                <h3 style="
    display:  inline-block;
    margin-bottom:  0;
">Hello World</h3>
                                <p style="font-size:10px;color:#03225C;width: 146px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.   </p>
                            </div>
                        </div>
                   </div>
0 голосов
/ 06 мая 2018

Вы можете использовать медиа-объект, который доступен в Bootstrap 3.3. Подробнее об этом читайте здесь здесь

Я скопировал его с медиа-объектом. 

.p-5{
  padding-top: 3rem;
}
.media{
  border: 1px solid #444;
  padding: 3rem;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="container p-5">
  <div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="https://randomuser.me/api/portraits/men/78.jpg" alt="">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Lorem ipsum dolor sit amet</h4>
    <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem r sit amet Lorem ipsum dolor sit amet Lorem r sit amet Lorem ipsum dolor sit amet Lorem r sit amet Lorem </p>
    <div class="media-footer">
    <span class="pull-left">Jason Hunk</span>
    <span class="pull-right">4 min read</span>
    </div>
  </div>
  
</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...