Question

ı使用bootstrap 4.0创建了一个div，但我想在另一个使用bootstrap 3.7创建的页面中使用该div，因此这两个版本的bootstrap冲突。如何将bootstrap 4.0转换为bootstrap 3.7而不会发生故障？< / p>

我已经使用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

从代码中识别以前版本的bootstrap不支持的类，并用不同的类替换它们。

Answer 2

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

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

这些更改可以改善您的代码并使渲染更快，而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>

如何将Bootstrap转换为旧版本？

2 个答案: