Question

我正在改变旧布局 旧HTML JFiddle: https://jsfiddle.net/LybeppL3/11/

新的当前代码： https://jsfiddle.net/5c2sm9s1/23/ 或者@ PreemPrice.com

我无法让新布局的行为与旧版布局相同。具体来说，有两件事。

如果按照我的意愿超越段落的主体，图形/图像会反而崩溃。
与我之前的代码不同，图片以无中心的方式折叠。

目前，我的新代码在桌面上看起来比以前的版本更好。（图片没有切入文字）。但它目前在移动设备上看起来并不像旧设备那么漂亮。

旧代码的移动外观。我不想在移动设备上看到我的新代码

新代码的美学问题。我想解决的问题

请注意这是如何演示我在上面列表中列出的两个问题。堆叠在下面而不是在段落之上，并且不居中。

我想修复这些问题，使其与旧代码（1）的外观相匹配

感谢您帮助我们正常工作！谢谢！

Answer 1

您需要使用文本块将div上方的图片div移动。然后，您需要为图片div添加ID，并使用CSS将其与中心对齐。

更新的HTML代码如下所示：

    <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Issue</title>
  </head>
  <body>

  <section id= "about">
            <div class= "container containerPadding">
             <div class= "row justify-content-center">
                 <div class= "col-sm-12">
                     <h1 class="text-center ExperienceName">About Us</h1>
                     <h4 class="text-center pb-3">From Humble Beginnings.</h4>
                 </div>

             </div>

            <div class= "row justify-content-center">

                     <div id='profile-pic' class="col-sm-3">
                      <figure class="figure ez-animate text-center" id="profilePic" data-animation="fadeInRight">
                           <img src="http://via.placeholder.com/250x250" width="250" height="250" class="figure-img img-fluid rounded ez-animate" alt="A generic square placeholder image with rounded corners in a figure." data-animation="fadeInRight">
                      <figcaption class="figure-caption"><a href="https://josephromo.com">Joseph A. Romo</a> | Co-Founder & CEO</figcaption>
                  </figure> 
              </div>
                 <div class= "col-sm-9">
                     <p class="text-justify pt-4 ez-animate" data-animation="fadeInUp"> PreemPrice.com LLC was established in 2010 by Joseph A. Romo. An observant middle school student at the time, Joseph became frustrated with the large mark-ups that retailers and manufacturers would impose on seemingly simple products. 
                     </p>

                     <p class="text-justify ez-animate" data-animation="fadeInUp"> As an ambitious attempt to tackle this challenge, Joseph established LivingRoyal.com, a small drop-shipping operation that focused on selling a wide variety of consumer goods and electronics. After encountering some challenges, Joseph decided to re-evaluate the business model and consider entering a much more niche market. It is here where the PreemPrice.com of today was born. 
                     </p>

                     <p class="text-justify ez-animate" data-animation="fadeInUp"> Rather than offering as wide of an array of products, PreemPrice decided to focus on selling a handful of select products-five or less-that were widely used, had fast turn-over, and would be able to offer to customers at a much deeper discount than that of its competitors. These products included toilet tissue, latex medical examination gloves, and the most successful, GatorCase®, a proprietary line of mobile electronic accessories. </p>

                     <p class="text-justify ez-animate" data-animation="fadeInUp">At the heart of PreemPrice's mission is to provide our customers with the utmost quality and value on widely used select products. Today, PreemPrice continues selling items under the GatorCase® brand, while operating on a dynamic basis-a novel eCommerce business model that we created, where we put up products for sale only once we have secured a deal that we know our customers will absolutely love. 
                     </p>
                 </div>


             </div>
         </div>          
     </section>



   <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

更新的CSS代码如下所示：

#profile-pic {
  text-align: center
}

您可以找到更新的小提琴here。

以引导程序4为中心的问题

1 个答案: