內容通過導航欄 - 引導問題

Question

我的導航欄上有一些輕微的樣式問題，用我的HTML/CSS代碼。

下面是它現在的樣子。

這裏就是我想要它看起來像：

下面是該位我的HTML代碼：

<div class="page"> 
    <div class="container-fluid"> 
     <div class="col-xs-10 col-sm-3 branding"> 
      <a class="imgCon" href="{{var protoHost}}"> 
       <img alt="Coolguy" src="{{var protoHost}}img/coolguy.png"> 
      </a> 
     </div> 
     <div class="container-fluid ContactNumber col-xs-0"> 
     <p><i class="fa fa-phone"></i><a href="tel:555-555-5555" style="color: black"> 555-555-5555</a></p> 
     <p><i class="fa fa-envelope"><a href="info@coolguy.co" style="color: black"></i> info@coolguy.co</a></p> 
     </div> 
     <div class="container-fluid ContactNumber"> 
     <button type="button" class="btn btn-primary">My Account</button> 
     </div> 

我的CSS：

html{ 
    position: relative; 
    width: 100%; 
    min-height: 100%; 
} 
body{ 
    font-family: "Roboto"; 
    margin-bottom: 60px; 
} 
a{ 
    color:#00A0F0; 
} 
.spacer{ 
    height:70px; 
    width: 100%; 
} 
.socialspacer { 
    height: 30px; 
} 
.AccountButton { 
    padding-left: 730px; 
} 
.smallspacer{ 
    height: 35px; 
    width: 100%; 
} 
.spacer-1{width:100%;height:10px;}.spacer-2{width:100%;height:20px;}.spacer-3{width:100%;height:30px;}.spacer-4{width:100%;height:40px;} 
.spacer-5{width:100%;height:50px;}.spacer-6{width:100%;height:60px;}.spacer-7{width:100%;height:70px;}.spacer-8{width:100%;height:80px;} 
.spacer-9{width:100%;height:90px;}.spacer-10{width:100%;height:100px;}.spacer-11{width:100%;height:110px;}.spacer-12{width:100%;height:120px;} 

.locationTitle{ 
    text-align: center; 
    font-weight: 700; 
    font-size: 2em; 
    color:#007dd1; 
    margin-bottom: 24px; 
    margin-left: 24px; 
    margin-top: 24px; 
} 
.subTitle{ 
    text-align: center; 
} 
.subHead{ 
    line-height: 1em; 
    font-size: .6em; 
} 
.navbar{ 
    height: 100px; 
    background-color: 
} 
.navbar>.container-fluid{ 
    height: 100px; 
    padding: 0; 
} 
.navbar>.container-fluid>*{ 
    height: 100px; 
} 
.navbar>.container-fluid img{ 
    height: 100px; 
} 
.branding *{ 
    display: block; 
    text-align: center; 
    color: #007dd1 
} 
.navbartext p { 
     padding-top: 17px; 
     padding-left: 172px; 
     text-align: center; 
     font-size: 17px; 
} 
.ContactNumber { 
    padding-top: 38px; 
} 
.contactspacer { 
    margin-top: 45px; 
} 
.InternetSpacer { 
    height: 45px; 
} 
.InfoSpacer { 
    margin-left: 45px; 
} 
.centerlinks { 
    text-align: center; 
} 
.navIcon{ 
    padding: 10px; 
    border-radius: 50%; 
    color:white; 
    background-color: #0071bd; 
} 
.navbar > li > a:hover{ 
    text-shadow: 0 1px 3px #CDF; 
} 
.navbar li:not(.navSep):hover{ 
    margin: 0 0 -2px 0; 
    border-bottom: 2px solid white; 
} 

.navSep{ 
    width:2px; 
    height: 40px; 
    margin: 5px 2px 5px 2px; 
    background-color: #A9AFDD; 
} 

.imgCon{ 
    max-height: 100%; 
    max-width:100%; 

} 
.imgCon img{ 
    width: auto; 
    height: auto; 
    max-width:100%; 
    max-height: 100%; 
     padding-bottom: 25px; 
} 

.page{ 
    width: 100%; 
    height: 100%; 
    padding-bottom:50px; 
} 

@media (max-width:768px){ 
    div[aria-expanded="true"] .navSep{ 
     display: none; 
    } 
} 

.mainTitle{ 
    font-size: 1.5em; 
    font-weight: 700; 
    background-color: white; 
} 

.extraInfo{ 
    background-color: #333; 
    color:white; 
    box-shadow: 1px 1px 2px 1px grey; 
    font-size: 1.2em; 
} 

.footer{ 
    background-color: #007dd1; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 110px; 
    text-align: right; 
} 
.footer a{ 
    text-align: center; 
    height: 100%; 
    color: white; 
} 
.footer p{ 
    text-align: center; 
    height: 100%; 
    color: white; 
} 
@media (min-width : 1200px) { 
    .col-xl-0{display:none;} 

} 
@media (max-width : 1200px){ 
    .col-lg-0{display:none;} 
} 
@media (max-width : 992px){ 
    .col-md-0{display:none;} 
} 
@media (max-width : 768px){ 
    .col-sm-0{display:none;} 
} 
@media (max-width : 480px){ 
    .col-xs-0{display:none;} 
    .page { 
     padding-bottom: 160px; 
    } 
    .footer { 
     height: 160px; 
    } 
} 



@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'); 
} 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); 
} 

任何想法/建議將是偉大的！

Answer 1

這是由於將數據放入塊級元素... <p>和<div>標籤。

如果您希望聯繫人數據以內聯方式顯示，您可以給<p>一個類和它的樣式以內聯方式顯示，或者您可以將兩者放置在同一個<p>標記中。

<p class="inlineParagraph"><i class="fa fa-phone"></i><a href="tel:555-555-5555" style="color: black"> 555-555-5555</a></p> 
<p class="inlineParagraph"><i class="fa fa-envelope"><a href="info@coolguy.co" style="color: black"></i> info@coolguy.co</a></p> 
<div class="clear"></div> 

.inlineParagraph { 
    float:left; 
    display:inline; 
} 
.clear { 
    clear:both; 
} 

或者......

<p><span class="contactInfo"><i class="fa fa-phone"></i><a href="tel:555-555-5555" style="color: black"> 555-555-5555</a></span> 
<span class="contactInfo"><i class="fa fa-envelope"><a href="info@coolguy.co" style="color: black"></i> info@coolguy.co</a></span></p> 

和風格，你需要的任何間隔你跨越類。

至於「我的帳戶」按鈕，那也是有同樣的問題。它在塊級元素中。您可以將浮點和內聯顯示添加到div以更正此問題，並且會按您的需要顯示。

對不起，代碼概述瞭如何正確設置佈局。我目前在我的手機上，編碼在這個東西是不太理想的！如果你需要更多的指導，當我回到電腦時，我可以用代碼更新我的答案。

===編輯===

這裏是我的小提琴已經申請了一些更新HTML和CSS ...

<div class="page"> 
    <div class="container-fluid"> 
    <!-- id 'tempStyle' added to create artificial boundry for testing --> 
     <div id="tempStyle" class="col-xs-10 col-sm-3 branding"> 
      <a class="imgCon" href="{{var protoHost}}"> 
      Image goes here 
      <!-- <img alt="Coolguy" src="{{var protoHost}}img/coolguy.png">--> 
      </a> 
     </div> 
     <div class="container-fluid ContactNumber col-xs-0"> 
     <p class="inlineParagraph"><i class="fa fa-phone"></i><a href="tel:555-555-5555" style="color: black"> 555-555-5555</a></p> 
<p class="inlineParagraph"><i class="fa fa-envelope"><a href="info@coolguy.co" style="color: black"></i> info@coolguy.co</a></p> 
<div class="clear"></div> 
     </div> 
     <div class="container-fluid ContactNumber"> 
     <button id="myAccountBtn" type="button" class="btn btn-primary">My Account</button> 
     </div> 
     <!-- 'Clearing' floated divs to prevent breaking content further down the tree --> 
     <div class="clear"></div> 
     </div> 
    </div> 
</div> 

一些你的CSS中還修改了一下。這一切都在小提琴中，但這裏是我做的一個例子：

.ContactNumber { 
    padding-top: 38px; 
    float:left; 
    display:inline; 
    width: 275px; 
} 

已添加寬度以允許在小提琴上內聯顯示。您可能需要根據您的具體需求進行調整。

小提琴鏈接：https://jsfiddle.net/vwzg7rxt/