Bootstrap 4 Beta, wie Bild nach dem Text hinzufügen

Question

Ich habe ein Problem mit dem Hinzufügen eines Bildes in "Menü" Abschnitt bei dem letzten Artikel "Kava so sebou" nach dem Text. (Sollte die Bildmitte vertikal und die Reihe wie die anderen Elemente oben aussehen sollte. Irgendwelche Vorschläge? Vielen Dank für Ihre Hilfe. Ich Bootstrap nur lernen, und ich bin ein Mädchen. (Urkomisch Kombination)

benutzerdefinierte CSS

.menu { 
 
    padding: 70px 0px; 
 
} 
 
.menu .block > p { 
 
    color: #9D9D9D; 
 
    font-size: 16px; 
 
    line-height: 26px; 
 
    padding: 40px 133px 0; 
 
    text-align: center; 
 
} 
 
.menu .block .pricing-list { 
 
    padding-top: 5px; 
 
} 
 
.menu .block .pricing-list ul { 
 
    list-style-type: none; 
 
    padding: 0 0 30px; 
 
    margin: 0; 
 
} 
 
.menu .block .pricing-list ul li { 
 
    padding: 21px 0px; 
 
} 
 
.menu .block .pricing-list ul li .item .item-title { 
 
    position: relative; 
 
} 
 
.menu .block .pricing-list ul li .item .item-title h2 { 
 
    display: inline-block; 
 
    position: relative; 
 
    z-index: 99; 
 
    background: #fff; 
 
} 
 
.menu .block .pricing-list ul li .item .item-title .border-bottom { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 1px; 
 
    border: 1px dotted #C9C9C9; 
 
    margin-top: 40px; 
 
} 
 
.menu .block .pricing-list ul li .item .item-title .border-bottom-coffee { 
 
    position: absolute; 
 
    top: 50px; 
 
    width: 100%; 
 
    height: 1px; 
 
    border: 1px dotted #C9C9C9; 
 
    margin-top: 30px; 
 
} 
 
.menu .block .pricing-list ul li .item .item-title span { 
 
    float: right; 
 
    color: #938463; 
 
} 
 
.menu .block .pricing-list ul li .item .item-title span { 
 
    float: right; 
 
    color: #938463; 
 
} 
 
.menu .block .pricing-list ul li .item .item-title img { 
 
\t padding-bottom: 20px; 
 
} 
 
.menu .block .pricing-list ul li .item p { 
 
    padding: 12px 0 0px; 
 
    color: #949494; 
 
}

<!-- Start Menu list --> 
 
    <section id="menu" class="menu"> 
 
    <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-md-12"> 
 
        <div class="block"> 
 
         <div class="pricing-list"> 
 
          <div class="title"> 
 
          <div class="container"> 
 
          <ul> 
 
           <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="1100ms" style="visibility: visible; animation-duration: 300ms; animation-delay: 1100ms; animation-name: fadeInUp;"> 
 
            <div class="item"> 
 
             <div class="item-title"> 
 
              <h2>Pivo 10 0.5L</h2> 
 
              <div class="border-bottom"></div> 
 
              <span>€ 1.20</span> 
 
             </div> 
 
             <p>Zlatý Bažant, Staropramen</p> 
 
            </div> 
 
           </li> 
 
           <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="1200ms" style="visibility: visible; animation-duration: 300ms; animation-delay: 1200ms; animation-name: fadeInUp;"> 
 
            <div class="item"> 
 
             <div class="item-title"> 
 
              <h2>Káva so sebou </h2> 
 
              <div class="border-bottom"></div> 
 
              <span>€ 1.20</span> 
 
             </div> 
 
             <p>Štrbské Presso</p> 
 
            </div> 
 
           </li> 
 
          </ul>       
 
         </div> 
 
        </div><!-- block close --> 
 
       </div><!-- .col-md-12 close --> 
 
      </div><!-- .row close --> 
 
     </div><!-- .containe close --> 
 
    </section><!-- #price close -->

Answer 1

Sie diesen Teil der Bootstrap-docs lesen sollte, ist es für Aufgaben wie diese sehr hilfreich sein wird: http://getbootstrap.com/docs/4.0/layout/media-object/

In diesem Fall sollten Sie setzen yo Fügen Sie Ihren Text zu Div mit Klasse media-body und fügen Sie media-object zu div mit Ihrem Bild hinzu.

Dann müssen Sie nur einige Änderungen in Ihrem CSS vornehmen, und es wird perfekt aussehen.

Es ist das schnell gemacht Code, den ich gemacht habe:

<div class="item"> 
     <div class="item-title media"> 
       <div class="media-body" style="white-space: nowrap;padding-top: 50px;"> 
         <h2>Káva so sebou</h2> 
       </div> 
       <div class="media-object"> 
         <img class="align-self-center mx-auto=" d-inline-block="" text-nowrap="" src="./images/coffee.jpg"> 
       </div> 
       <div class="border-bottom-coffee" style="position:relative;"></div> 
       <span>€ 1.20</span> 
     </div> 
</div> 

Answer 2

Vielen Dank für Ihre Beratung. Dies funktionierte für mich

<li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="1200ms" style="visibility: visible; animation-duration: 300ms; animation-delay: 1200ms; animation-name: fadeInUp;"> 
    <div class="item"> 
    <div class="item-title media"> 
     <h2> 
     Káva so sebou 
     <p>Štrbské Presso</p> 
     </h2> 
     <div class="border-bottom"></div> 
     <div class="media-object"> 
      <img class="d-block img-fluid" src="./images/coffee.jpg">            
     </div> 
     <div class="media-body"> 
     <span>€ 1.20</span> 
     </div> 
     </div> 
    </div> 
</li>