1. ホーム
  2. 質問と答え
  3. ブートストラップレスポンダのフッターイメージのアラインメント

ブートストラップレスポンダのフッターイメージのアラインメント

2017-02-06 6 views
0

私は反応的なフッターを作成していますが、フッターのイメージにはまっています。 左（赤）側は今のところ良いですが、応答はありませんが、それは後で行うものです。右側のもの（青色）では、イメージがほしい、3つの円は右側に浮かんでいて、左側のものと同じですが、右側に浮かんでいます。しかし、私はそれを行うことはできません。 私がアップロードした2枚目の画像は、スニペットで取得できないフッターの画像です。誰かアイデア？ enter image description hereブートストラップレスポンダのフッターイメージのアラインメント

this is the footer image

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

    <style> 
     .nopadding { 
      padding: 0 !important; 
      margin: 0 !important; 
      bottom: 0 !important; 
     } 
     #footer{ 
      width: 100%; 
      height: 80px; 
      background-color: black; 
      bottom: 0; 
      left: 0; 
      position: absolute; 
     } 
     #links{ 
      background-color: red; 
     } 
     #rechts{ 
      background-color: blue; 
      float: right; 
     } 
     #links img{ 
      width: 20%; 
      float: left; 
      margin-top: 6%; 
      margin-right: 7.5%; 
     } 
     #links p{ 
      color: white; 
      font-weight: bold; 
      font-size: 1.2em; 
      margin-left: 5%; 
      line-height: 80px; 
      margin-bottom: -0.1em; 
     } 
     #rechts img{ 
      width: 20%; 
      //float: right; 
      margin-top: 6%; 
      margin-right: 7.5%; 
      position: relative; 
     } 
     #rechts p{ 
      color: white; 
      //text-align: right; 
      float: right; 
      font-weight: bold; 
      font-size: 1.2em; 
      margin-left: 5%; 
      line-height: 80px; 
      margin-bottom: -0.1em; 
     } 

     /* Medium devices (desktops, 992px and up) */ 
    @media (min-width: 767px) and (max-width : 992px) { 

    } 

    /* Large devices (large desktops, 1200px and up) */ 
    @media (max-width: 1200px) { 

    } 
    </style> 
</head> 
<body> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-12" id="footer"> 
       <div class="row"> 
        <div class="col-md-3"> 
        </div> 
        <div class="col-md-6"> 
         <div class="row"> 
          <div class="col-md-6 nopadding" id="links"> 
           <img src="img/footer.png"><p>EXAMPLE 100A, 1234 AB EXAMPLE</p> 
          </div> 
          <div class="col-md-6 nopadding" id="rechts"> 
           <img src="img/footer.png"><p>TEL. +01 (2)345-678912</p> 
          </div> 
         </div> 
        </div> 
        <div class="col-md-3"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js "></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js "></script> 
</body>

出典

2017-02-06 Johan

答えて

0

I 2枚の画像 1を取る有する）Footer left imageこれはフッタの左画像です。 2）Footer Right imageこれはフッターの右のイメージです。

は今（col-）のdiv内のこれら2枚の画像を結合し、これらの画像This is final output image

注に示したように、あなたは出力を取得します：私はまた、あなたの画面size.If必要性につきとして、それが応答行きました変更は私に尋ねる。

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js "></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js "></script> 
    <style> 
     div.img1{ 
      background-image:url("footerimage1.png"); 
      background-repeat:no-repeat; 
      background-size:cover; 
      height:150px; 
     } 

     div.img2{ 
      background-image:url("footerimage2.png"); 
      background-repeat:no-repeat; 
      background-size:cover; 
      height:150px; 
     } 

     .heading1{ 
      margin-top:75px; 
      text-align:right; 
      color:#fff; 
      font-weight:900; 
     } 

     .heading2{ 
      margin-top:75px; 
      text-align:right; 
      color:#fff; 
      font-weight:900; 
     } 

     @media only screen and (max-device-width: 768px) and (orientation: portrait){ 
      div.img1{ 
       background-image:url("footerimage1.png"); 
       background-repeat:no-repeat; 
       background-size:cover; 
       height:150px; 
       width:50%; 
       float:left; 
      } 

      div.img2{ 
       background-image:url("footerimage2.png"); 
       background-repeat:no-repeat; 
       background-size:cover; 
       height:150px; 
       width:50%; 
       float:left; 
      } 

      .heading1{ 
       margin-top:75px; 
       text-align:right; 
       color:#fff; 
       font-weight:900; 
       font-size:11px; 
      } 

      .heading2{ 
       margin-top:75px; 
       text-align:right; 
       color:#fff; 
       font-weight:900; 
       font-size:11px; 
      } 
     } 

     @media only screen and (max-device-width: 1024px) and (orientation: landscape){ 
      .heading1{ 
       margin-top:75px; 
       text-align:right; 
       color:#fff; 
       font-weight:900; 
       font-size:12px; 
      } 

      .heading2{ 
       margin-top:75px; 
       text-align:right; 
       color:#fff; 
       font-weight:900; 
       font-size:14px; 
      } 
     } 

     @media only screen and (max-device-width: 414px) and (orientation: portrait){ 
      div.img1{ 
       background-image:url("footerimage1.png"); 
       background-repeat:no-repeat; 
       background-size:cover; 
       height:230px; 
       width:100%; 
      } 

      div.img2{ 
       background-image:url("footerimage2.png"); 
       background-repeat:no-repeat; 
       background-size:cover; 
       height:230px; 
       width:100%; 
      } 

      .heading1{ 
       margin-top:90px; 
       text-align:right; 
       color:#fff; 
       font-weight:900; 
       font-size:28px; 
      } 

      .heading2{ 
       margin-top:90px; 
       text-align:right; 
       color:#fff; 
       font-weight:900; 
       font-size:28px; 
      } 
     } 

      /* Medium devices (desktops, 992px and up) */ 
     @media (min-width: 767px) and (max-width : 992px) { 
      div.img1{ 
       background-image:url("footerimage1.png"); 
       background-repeat:no-repeat; 
       background-size:cover; 
       height:230px; 
       width:50%; 
       float:left; 
      } 

      div.img2{ 
       background-image:url("footerimage2.png"); 
       background-repeat:no-repeat; 
       background-size:cover; 
       height:230px; 
       width:50%; 
       float:left; 
      } 

      .heading1{ 
       margin-top:170px; 
       text-align:center; 
       color:#fff; 
       font-weight:900; 
       font-size:18px; 
      } 

      .heading2{ 
       margin-top:170px; 
       text-align:center; 
       color:#fff; 
       font-weight:900; 
       font-size:18px; 
      } 
     } 

     /* Large devices (large desktops, 1200px and up) */ 
     @media (max-width: 1200px) { 
      .heading1{ 
       margin-top:60px; 
       text-align:right; 
       color:#fff; 
       font-weight:900; 
       font-size:16px; 
      } 

      .heading2{ 
       margin-top:60px; 
       text-align:right; 
       color:#fff; 
       font-weight:900; 
       font-size:18px; 
      } 
     } 
    </style> 
</head> 
<body> 
    <footer> 
     <div class="row"> 
      <div class="col-lg-6 col-md-6 img1"> 
       <h4 class="heading1">Example 100A, 1234 AB EXAMPLE</h4> 
      </div> 
      <div class="col-lg-6 col-md-6 img2"> 
       <h4 class="heading2">TEL. +01(2)345-678912</h4> 
      </div> 
     </div> 
    </footer> 
</body> 
</html>

出典

2017-02-08 03:42:10

関連する問題

 関連する問題