徽標對齊的左側桌面/然後集中在手機上 - 引導

我已經從HTML & css休息，現在我正在嘗試使用引導框架來做我的新網站。徽標對齊的左側桌面/然後集中在手機上 - 引導

我需要我的標識才能在桌面設備上左側放置，然後居中放置右側的文本以及移動設備...我在試圖弄清楚這一點時遇到了很多麻煩。有人可以幫助！謝謝！

<div class="container"> 
<header id="headertop"> 

<div class="row"> 
    <div class="col-lg-9 col-md-9 col-xs-12"> 
     <div class="logo-top"> 
     <a href="index.html"> <img class="img-responsive" src="images/ejc-logo.png"/> </a> 
     </div> <!-- // end .logo-top --> 

    </div> <!-- // end .col LOGO --> 


    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> 

     <div class="contact-info-top"> 
      <span class="contact-phone hidden-sm hidden-xs"> 973.452.9716 </span> <br> 
      <span class="contact-email hidden-sm hidden-xs"> [email protected] </span> 

      <div class="contact-info-top-mobile text-center"> 

      <h5 class="contact-phone-mobile hidden-md hidden-lg hidden-xl"> 973.452.9716 </span> <br> 
      <h5 class="contact-email-mobile hidden-md hidden-lg hidden-xl"> [email protected] </span> 

      </div> 
     </div> 

    </div>

來源

2016-05-29 user3661773

CSS文件：

@media (max-width: 768px) { 
    .img-responsive { 
     transform: translateX(-50%); 
     left: 50%; 
     position: absolute; 
     } 
    }

演示：http://www.bootply.com/YL64euYYAZ

來源

2016-05-29 17:51:56

我已經簡化了你的代碼。請檢查結果。你需要改進什麼？

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
@media (max-width: 767px) { 
 
    .logo-top img { 
 
    margin: 0 auto; 
 
    } 
 
    .contact-info-top .contact-phone, 
 
    .contact-info-top .contact-email { 
 
    text-align: center; 
 
    } 
 
} 
 

 
@media (min-width: 768px) { 
 
    .contact-info-top { 
 
    /* add what you need */ 
 
    } 
 
    .contact-info-top .contact-phone { 
 
    /* add what you need */ 
 
    } 
 
    .contact-info-top .contact-email { 
 
    /* add what you need */ 
 
    } 
 
}

<div class="container"> 
 
    <header id="headertop"> 
 
    <div class="row"> 
 

 
     <div class="col-xs-12 col-sm-9 logo-top"> 
 
     <a href="index.html"><img class="img-responsive" src="http://placehold.it/50x50/c69/fff/?text=logo" /></a> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-3 contact-info-top"> 
 
     <div class="contact-phone"> 973.452.9716 </div> 
 
     <div class="contact-email"> [email protected] </div> 
 
     </div> 
 

 
    </div> 
 
    </header> 
 
</div>

來源

2016-05-29 21:13:25

這將工作....

<div class="container"> 
    <header id="headertop"> 

    <div class="row"> 
     <div class="col-lg-9 col-md-9 col-sm-12"> 
      <div class="logo-top"> 
      <a href="index.html"> <img class="img-responsive" src="images/ejc-logo.png"/> </a> 
      </div> <!-- // end .logo-top --> 

     </div> <!-- // end .col LOGO --> 


     <div class="col-lg-3 col-md-3 col-sm-12"> 

      <div class="contact-info-top"> 
       <span class="contact-phone hidden-sm hidden-xs"> 973.452.9716 </span> <br> 
       <span class="contact-email hidden-sm hidden-xs"> [email protected] </span> 

       <div class="contact-info-top-mobile text-center"> 

       <h5 class="contact-phone-mobile hidden-md hidden-lg hidden-xl"> 973.452.9716 </span> <br> 
       <h5 class="contact-email-mobile hidden-md hidden-lg hidden-xl"> [email protected] </span> 

       </div> 
      </div> 

     </div>

來源

2016-06-01 12:25:44

徽標對齊的左側桌面/然後集中在手機上 - 引導

回答

相關問題