Bootstrap - 響應Navbar-品牌

Question

有沒有辦法在大屏幕上顯示左側的品牌文字，然後在小屏幕上顯示中間文字？我使用這個atm來居中它，但它使用寬度，所以整個酒吧是一個鏈接。

<a href="" target="blank" class="navbar-brand">Name of App</a> 

 

.navbar-brand { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    text-align: center; 
    margin: auto; 
} 
.navbar-toggle { 
    z-index: 3; 
} 

Answer 1

檢查這個CSS和利用媒體查詢必須在不同的屏幕採用了不同的CSS大小

@media(max-width: 767px) { 
    .navbar-brand { 
    position: absolute; 
    width: 30%; 
    left: 0; 
    top: 0; 
    text-align: left; 
    margin: auto; 
    } 

} 

@media(min-width: 768px) { 
    .navbar-brand { 
    position: absolute; 
    width: 30%; 
    left: 0; 
    top: 0; 
    text-align: center; 
    margin: auto; 
    color: orange; 

    } 
    .nav.navbar-nav { 
    margin-left: 30%; 
    } 

} 

JSFIDDLE

Answer 2

三江源:)是精簡版拉力賽評論說我已經用這個排序

@media (max-width: 768px) { 
    .navbar-brand { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    text-align: center; 
    margin: auto; 
} 
.navbar-toggle { 
    z-index: 3; 
} 
}