如何将 Bootstrap 转换为旧版本？

Question

我已经使用 bootstrap 4.0 创建了一个 div，但我想在另一个使用 bootstrap 3.7 创建的页面中使用该 div，所以这两个版本的 bootstrap 冲突。如何在不崩溃的情况下将 bootstrap 4.0 转换为 bootstrap 3.7？

我使用 bootstrap 4.0 添加了我的 div 代码，请帮助我将我的 div 转换为 bootstrap 3.7。

提前致谢。

     <div id="divSignature" class="container" style="margin-top:10px;padding-top:10px; width:420px;height:250px;background-color:White;font-size:14px;">
        <div class="row">
            <div class="col-xs-1">
                <img style="width: 140px" src="images/logo_signature.png"/>
            </div>

            <div class="col-xs-11" style="margin-left: 15px">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-10">
                            <div class="container">
                                <div class="row">
                                    <h5>
                                  <b>   <asp:Label ID="lblName" runat="server" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"></asp:Label> </b>
                                    </h5>
                                </div>
                                <div class="row" style="margin-top: -5px">
                                    <p class=".font-weight-normal">
                                        <asp:Label ID="lblTitle" runat="server" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"></asp:Label>                
                                    </p>
                                </div>
                                <hr style="margin-top: -10px;"/>
                                <div class="row" style="margin-top: -15px">
                                        <p>
                                            <strong>M&nbsp;:</strong><asp:Label ID="lblPhone" runat="server" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"></asp:Label>
                                        </p>
                                </div>
                                <div class="row"  style="margin-top: -20px">
                                        <p>
                                            <strong>T&nbsp;&nbsp;: </strong><p style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">  +00 00 00 00</p>
                                        </p>
                                    </div>

                                <div class="row"  style="margin-top: -20px">
                                        <p>
                                            <strong>E &nbsp;:&nbsp;</strong><asp:Label ID="lblEmail" runat="server" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"></asp:Label>
                                        </p>
                                    </div>
                                    <div class="row"  style="margin-top: -20px">
                                            <p>
                                                <strong>W:&nbsp;</strong><p style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"> www.france.com</p>
                                            </p>
                                        </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            
        </div>
        <div class="row" style="margin-top: 0px; margin-left: 1px;font-size:12px;">
            <div class="container">
                <div class="row">
                        <div class="col-xs-11" style="align-self: center;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" >
                               
                                France<br/>
                        </div>
                            
                        <div class="col-xs-1" style="margin-left: 15px;margin-bottom:10px;">
                                <img width="70" src="images/qr_code.png"/>    
                        </div>       
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 0px; margin-left: 0px" >
                <img style="width: 400px" src="images/seritt.png"/>
        </div>
    </div>

Answer 1

从您的代码中找出以前版本的引导程序不支持的类，并将它们替换为不同的类。

Answer 2

您的HTML 不够好，您将CSS 与HTML, 混合在一起，当有人想阅读您的代码时，这很糟糕。

• 我在此 HTML 文档中没有看到任何类别的 Bootstrap 4。
• 我可以看到您在HTML, 中遇到的一些问题，例如您正在使用多个容器，这不是必需的，也不是好的做法。您正在使用col-xs-1 来设置img 的with，这不是正确的方法。
• 您正在混合多列和多行，这不是正确的做法。

这些更改可以改进您的代码并使渲染速度更快，而 goodle 将提高评级。我删除了 CSS 我鼓励您创建一个外部 CSS 文件并在那里编写您的 CCS 规则。

<div id="divSignature" class="container">
    <div class="row">
      <div>
          <img style="width: 140px" class='img-resposive' src="images/logo_signature.png"/>
      </div> 
      <div class="col-xs-11">
          <h5>
            <asp:Label ID="lblName" runat="server"></asp:Label>
          </h5>
          <div class="row">
              <p>
                  <asp:Label ID="lblTitle" runat="server"></asp:Label>                
              </p>
          </div>
          <hr/>
          <div class="row">
              <p>
                  <strong>M&nbsp;:</strong><asp:Label ID="lblPhone" runat="server"></asp:Label>
              </p>
          </div>
          <div class="row"  style="margin-top: -20px">
              <p>
                  <strong>T&nbsp;&nbsp;: </strong><p>  +00 00 00 00</p>
              </p>
          </div> 
          <div class="row"  style="margin-top: -20px">
              <p>
                  <strong>E &nbsp;:&nbsp;</strong><asp:Label ID="lblEmail" runat="server"></asp:Label>
              </p>
          </div>
          <div class="row"  style="margin-top: -20px">
              <p>
                  <strong>W:&nbsp;</strong><p> www.france.com</p>
              </p>
          </div>
      </div> 
    </div>

    <div class="row">
        <div class="col-xs-11"> 
            France<br/>
        </div> 
        <div class="col-xs-1">
            <img width="70" src="images/qr_code.png"/>    
        </div>       
    </div>
    <div>
        <img style="width: 400px" src="images/seritt.png"/>
    </div>
</div>