带有css和bootstrap的html页面无法始终呈现卡

时间:2019-06-22 20:54:11

标签: html bootstrap-4

我有一个基本的带有CSS的引导程序和html页面,并且在正确显示第一个“卡片”的同时,其他所有卡片的大小也不同。 奇怪的是,也许这是解决方案的一个线索,当页面大小减小(例如减小到移动大小)时,所有卡片的大小都与期望的相同。

有人能建议一个解决方法来确保全页显示时所有卡的尺寸都相同吗?

 <section class="site-hero overlay page-inside" style="background-image: url(img/thames_backdrop.jpg)">
      <div class="container">
        <div class="row site-hero-inner justify-content-center align-items-center">
          <div class="col-md-12 text-center">
            <h1 class="heading" data-aos="fade-up">Browse</h1>
            <p class="sub-heading mb-5" data-aos="fade-up" data-aos-delay="100">West End</p>
           
          </div> 
        </div>
        <!-- <a href="#" class="scroll-down">Scroll Down</a> -->
      </div>
    </section>

   
            
         <div class="card_container">
          <div class="card_row">
            <div class="col-md-12">
          <section class="room">
      <!-- Room Image -->
      <div class="room_img">
        <img src="img/11_Cadogan_Gardens.jpg">
      </div>
      <!-- Room Information -->
      <div class="room_information">
        <h2 class="room_information--heading">Hotel1</h2>
        <p>Stylish town house hotel with a member's club atmosphere.</p>
        <a href="#" class="room_information--moreinfo-btn js-room_moreinfo_btn">+ more information</a>
      </div>
      <div class="room_moreinfo js-room_moreinfo" style="display: none;">
        <p id="quote">
          Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe
          al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es
          plu simplic e regulari quam ti del coalescent lingues.
        </p>

        <p>
          Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que
          Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun
          vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
        </p>
      </div>
      <!-- /Room more information section-->

      <div class="room_features">
        <ul>
          <li><i class="fa fa-bath"></i>&nbsp;WC</li>
          <!-- Bath Icon -->
          <li><i class="fa fa-male"></i>&nbsp;1-3</li>
          <!-- People Icon -->
          <li><span class="room_features--price">170.-</span><small class="room_features--currency">CHF</small></li>
          <!-- Price -->
        </ul>
        <a href="javascript:void(0);" class="room_features--book-btn">Book Now</a>
        <!-- Book now -->
      </div>
    </section>
  </div>


<div class="card_container">
  <div class="card_row">
    <div class="col-md-12">
    <section class="room">
      <!-- Room Image -->
      <div class="room_img">
        <img src="https://s26.postimg.org/w9k7s5h89/hotel_thumb_2.jpg" />
      </div>
      <!-- Room Information -->
      <div class="room_information">
        <h2 class="room_information--heading">45 Park Lane</h2>
        <p>Dramatic art-deco styling and exceptional friendly service.</p>
        <a href="#" class="room_information--moreinfo-btn js-room_moreinfo_btn">+ more information</a>
      </div>
      <div class="room_moreinfo js-room_moreinfo" style="display: none;">
        <p>
          Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe
          al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es
          plu simplic e regulari quam ti del coalescent lingues.
        </p>

        <p>
          Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que
          Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun
          vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
        </p>
      </div>
      <!-- /Room more information section-->

      <div class="room_features">
        <ul>
          <li><i class="fa fa-utensils-alt">&nbsp;</i></li>
          <!-- Bath Icon -->
          <li><i class="fa fa-male"></i>&nbsp;1-3</li>
          <!-- People Icon -->
          <li><span class="room_features--price">130.-</span><small class="room_features--currency">CHF</small></li>
          <!-- Price -->
        </ul>
        <a href="javascript:void(0);" class="room_features--book-btn">Book Now</a>
        <!-- Book now -->
      </div>
    </section>
  </div>
  <!-- /row-->
</div>
<!-- /container -->   

<!-- New card -->

<div class="card_row">
    <section class="room">
      <!-- Room Image -->
      <div class="room_img">
        <img src="https://s26.postimg.org/w9k7s5h89/hotel_thumb_2.jpg" />
      </div>
      <!-- Room Information -->
      <div class="room_information">
        <h2 class="room_information--heading">45 Park Hotel</h2>
        <p>Dramatic art-deco styling and exceptional friendly service.</p>
        <a href="#" class="room_information--moreinfo-btn js-room_moreinfo_btn">+ more information</a>
      </div>
      <div class="room_moreinfo js-room_moreinfo" style="display: none;">
        <p>
          Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe
          al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es
          plu simplic e regulari quam ti del coalescent lingues.
        </p>

        <p>
          Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que
          Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun
          vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
        </p>
      </div>
      <!-- /Room more information section-->

      <div class="room_features">
        <ul>
          <li><i class="fa fa-bath"></i>&nbsp;WC</li>
          <!-- Bath Icon -->
          <li><i class="fa fa-male"></i>&nbsp;1-3</li>
          <!-- People Icon -->
          <li><span class="room_features--price">130.-</span><small class="room_features--currency">CHF</small></li>
          <!-- Price -->
        </ul>
        <a href="javascript:void(0);" class="room_features--book-btn">Book Now</a>
        <!-- Book now -->
      </div>
    </section>
  </div>
  <!-- /row-->
</div>

<!-- New card -->

0 个答案:

没有答案