Question

我如何设计此类型的布局。我设计但当我改变我的笔记本电脑内容的分辨率左侧时出现某种问题。我是bootstrap的新手。我该如何设计这种类型的布局。我设计但当我改变我的笔记本电脑内容的分辨率左侧时出现某种问题。我是bootstrap的新手。我该如何设计这种类型的布局。我设计但当我改变我的笔记本电脑内容的分辨率左侧时出现某种问题。我是bootstrap的新手。

这是页脚布局：

这是引导代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--External Css-->
      <link href="css/style.css" rel="stylesheet">
    <!--vertical slide-->


  </head>
<body>


    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                 <div class="row flt">            
            <img src="images/envelope.png">
            <p>San Isidro, Lopez Jaena St.<br>
               Jaro Iloilo City, Philippines 5000<br>       
               Tell: 0927-338-2289<br>
               Email: jennpereira13(at)gmail.com</p>
            <img src="images/envelope.png">
              <p>San Isidro, Lopez Jaena St.<br>
               Jaro Iloilo City, Philippines 5000<br>       
               Tell: 0927-338-2289<br>
               Email: jennpereira13(at)gmail.com</p>
          </div>
        <div class="row flm">
            <h3>Secured Payment Trough:</h3>
            <hr>
            <img src="images/paypal.png" alt="paypal">
            <img src="images/master-card.png" alt="master card">
            <img src="images/google-checkout.png" alt="google-checkout">
            <img src="images/maestro.png" alt="maestro">
            <img src="images/ebay.png" alt="ebay">
            <img src="images/discover.png" alt="discover">
            <img src="images/cirrus.png" alt="cirrus">
            <img src="images/2checkout.png" alt="2checkout">
            <img src="images/visa-electron.png" alt="visa electron">
            <img src="images/direct-debit.png" alt="direct debit">
        </div>
        <div class="row flb">
            <h3>Disclaimer:</h3>
            <hr>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
            </div>
            <div class="col-lg-6">
                <div class="row footer-right">
                <h1>INCREASE YOUR<br> ENGERGY LEVEL WITH</h1><h1 class="yellow">CUP OF TEA <span>EVERY</span>DAY</h1>
                 <form role="form">
                    <h1><b><img src="images/cup.png">TRY IT TODAY</b></h1>
                  <div class="form-group">
                    <input type="text" class="form-control" id="name" placeholder="Your Name">
                  </div>
                  <div class="form-group">
                    <input type="email" class="form-control" id="email" placeholder="Your Email">
                  </div>    
                  <button type="submit" class="btn">Order Now</button>
                    <div class="row form-bot">
                        <div class="col-sm-2 lock"><img src="images/lock.png" id="lock"></div> 
                        <div class="col-sm-10 lock-info" ><p>Don’t worry your email infomation is safe with us.<br> We hate spam as much as you hate. </p></div> 
                    </div>
                </form>
            </div>
            </div>
        </div>  
    </div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

您的布局没有重大错误。但是，您只针对较大的桌面设备 col-lg- 定位了布局，如果您需要将更改反映到iPad和移动视口，则需要包含引导类以定位这些视口。

例如。

<div class="col-lg-6"></div> <!--Targets only Large Desktop devices-->
<div class="col-lg-6"></div>

如果您需要定位较小的设备，则需要提及额外的引导类，如此，

<div class="col-md-3 col-lg-6"></div> <!--Targets both Medium and Large Desktop devices-->
<div class="col-md-9 col-lg-6"></div>

这意味着在较大的桌面设备上，我们使用的两列将被平均分为两列6列（6 + 6 = 12）。但是当在中型桌面设备（桌面992px和Up）上查看时，相同的两列被分为3 + 9 = 12.现在这些值可以根据您的要求明显改变。

这可能对你有所帮助。

从这里采取 - https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system

如何在bootstrap中制作页脚设计？

1 个答案: