如何使我的徽標和公司名稱作爲響應

請讓我知道如何使用HTML和CSS進行響應編輯。就好像我縮小屏幕尺寸一樣，它顯示出不同的對齊方式如何使我的徽標和公司名稱作爲響應

<div class="navbar navbar-default navbar-static-top" role="navigation"> 
 
     <div class="container-fluid"> 
 
       <!-- Brand and toggle get grouped for better mobile display --> 
 
       <div class="col-xs-12"> 
 
       <div id="logo"> 
 
        <a class="navbar-brand" href="http://www.belltele.co.in" 
 
      target="_blank"><font color="#e5001e">MY COMPANY NAME</font></a> 
 
       <div class = "img-responsive"> 
 
        <img src="logow.jpg" class="img-responsive" alt=" SORRY" 
 
      style="float:right"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>  
 
</div>

來源

2017-06-21 Vidhya Vidu

您能分享工作小提琴或片段 –

查看媒體查詢：https：//www.w3schools.com/css/css_rwd_mediaqueries.asp – Sebastian

我已經使用的響應和垂直對準的Flexbox的。

#logo { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 

 
.navbar-brand { 
 
    color: #e5001e; 
 
    margin-right: 1em; 
 
}

<div class="navbar navbar-default navbar-static-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="col-xs-12"> 
 
     <div id="logo"> 
 

 
     <a class="navbar-brand" href="http://www.belltele.co.in" target="_blank">MY COMPANY NAME</a> 
 
     <div class="img-responsive"> 
 
      <img src="http://placehold.it/50" class="img-responsive" alt="SORRY"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-06-21 06:29:39 Gerard

我認爲他想要的是最左邊的logo和最左邊的公司名稱，這可以通過在'＃logo'上進一步添加'justify-content：space-between;'來實現CSS。 :) –

如果需要正確的路線，你是絕對正確的Karan。或者，margin-left：auto; img-responsive也可以。 – Gerard

我試了一下，但標題和標誌不在頁面上。只有其他細節在頁面中，如果我調整它的大小，我需要做正確的滾動，只有標題我可以在右側看到，完全不同。在我的公司名稱標誌之後，我有響應表，它是正確的形式。 –

試試這個： https://codepen.io/NickHG/pen/WOjymd

添加行高度「對不起」（IMG響應）來調整它們在導航欄

.img-responsive{ 
    line-height:50px; //(bootstrap default navbar height is 50px) 
}

如果您更改導航欄的高度，您還需要調整以反映它

來源

2017-06-21 06:31:04 Nick

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果你想在LOGO是右側隨時添加這個元標記

來源

2017-06-21 06:41:43 Max3no

沒有任何代碼對我有幫助。如果我像上面所說的那樣添加它，單獨在第二頁出錯 –

，您可以定位它絕對是這樣：

div.image-responsive{ 
position: absolute; 
top: 5px; //add a space of 5px from the top 
right: 5px; //add a space of 5px from the right 
}

通過這種方式，圖像響應格總是在右側，距離右側5px，頂部

來源

2017-06-21 08:47:08 Strix

如何使我的徽標和公司名稱作爲響應

回答

相關問題