Ik wil de standaardnavigatiebalk van Bootstrap 3 gebruiken met een afbeeldingslogo in plaats van tekstbranding. Wat is de juiste manier om dit te doen zonder problemen te veroorzaken met verschillende schermformaten? Ik neem aan dat dit een veelvoorkomende vereiste is, maar ik heb nog geen goed codevoorbeeld gezien. Een andere belangrijke vereiste dan een acceptabele weergave op alle schermformaten is dat het menu op kleinere schermen kan worden samengevouwen.
Ik heb geprobeerd een IMG-tag in de A-tag te plaatsen die de navbar-merkklasse heeft, maar daardoor werkte het menu niet goed op mijn Android-telefoon. Ik heb ook geprobeerd de hoogte van de navbar-klasse te vergroten, maar dat verpestte het nog meer.
Trouwens, mijn logo-afbeelding is groter dan de hoogte van de navigatiebalk.
Antwoord 1, autoriteit 100%
Waarom probeert iedereen het op de moeilijke manier? Natuurlijk zullen sommige van deze benaderingen werken, maar ze zijn ingewikkelder dan nodig is.
Ok, eerst – je hebt een afbeelding nodig die in je navigatiebalk past. U kunt uw afbeelding aanpassen via het css-attribuut voor hoogte (waardoor de breedte kan worden geschaald) of u kunt gewoon een afbeelding van het juiste formaat gebruiken. Wat je ook besluit te doen – de manier waarop dit eruit ziet, hangt af van hoe goed je je afbeelding op maat maakt.
Om de een of andere reden wil iedereen de afbeelding in een anker plakken met navbar-brand, en dit is niet nodig. navbar-brandpast tekststijlen toe die niet nodig zijn voor een afbeelding, evenals de klasse navbar-left(net als pull-left, maar voor gebruik in een navigatiebalk ). Het enige dat u echt nodig hebt, is navbar-lefttoe te voegen.
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
Je kunt dit zelfs volgen met een navbar-merkitem, dat rechts van de afbeelding zal verschijnen.
Antwoord 2, Autoriteit 35%
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="/img/transparent-white-logo.png">
</a>
</div>
Antwoord 3, Autoriteit 17%
complete demo met vele voorbeelden
Belangrijke update: 12/21/15
Er is momenteel een bug in Mozilla Ik ontdekte dat de Navbar op bepaalde browserbreedten met Velen breekt Demo’s op deze pagina . In principe is de Mozilla-bug inclusief de linker en rechtervulling op de Navbar-merkkoppeling als onderdeel van de beeldbreedte. Dit kan echter gemakkelijk worden opgelost en ik heb dit getest en ik weet eerlijk zeker dat het het meest stabiele werkvoorbeeld is op deze pagina. Het zal automatisch formatteren en werken aan alle browsers.
Voeg dit gewoon toe aan uw CSS en gebruik NAVBAR-MERK op dezelfde manier als u .img-responsive. Uw logo past automatisch
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
een andere optie is om een achtergrondafbeelding te gebruiken. Gebruik een afbeelding van elke grootte en stel vervolgens de gewenste breedte in:
.navbar-brand {
background: url(https://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
origineel antwoord hieronder (alleen voor referentie)
Mensen lijken het object-fit veel te vergeten. Persoonlijk denk ik dat het de gemakkelijkste is om mee te werken omdat het beeld automatisch wordt aangepast aan de menuformaat. Als u het object passen op de afbeelding gebruikt, wordt het automatisch formatteren op de hoogte van de menu’s.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
Er werd op gewezen dat dit niet in IE werkt “toch”. Er is een Polyfill , maar dat is misschien buitensporig als u niet van plan bent om het voor iets anders te gebruiken. Het ziet eruit als object-fit is die gepland zijn voor een toekomstige release van IE, dus als dit gebeurt In alle browsers.
Als u echter opmerkt dat de .img-reagerende klasse in bootstrap de MAX-breedte ervan uitgaande dat u deze afbeeldingen in kolommen plaatst of iets dat expliciet met set heeft. Dit zou betekenen dat 100% specifiek 100% breedte van het ouderelement betekent.
.img-responsive
max-width: 100%;
height: auto;
}
De reden dat we dat niet met de navigatiebalk kunnen gebruiken, is omdat de bovenliggende (.navbar-brand) een vaste hoogte van 50px heeft, maar de breedte niet is ingesteld.
Als we die logica nemen en deze omkerenom responsief te zijn op basis van de hoogte, kunnen we een responsieve afbeelding hebben die schaalt naar de hoogte van het .navbar-merk en door de breedte toe te voegen en automatisch in te stellen, wordt deze aangepast in proportie.
max-height: 100%;
width: auto;
Normaal gesproken zouden we display:block;aan het scenario moeten toevoegen, maar aangezien navbar-brand al float:left; toegepast, fungeert het automatisch als een blokelement.
Het kan voorkomen dat uw logo te klein is. De img-responsieve aanpak houdt hier geen rekening mee, maar dat doen we wel. Door ook het kenmerk “height” toe te voegen aan de .navbar-brand > imgje kunt er zeker van zijn dat het zowel omhoog als omlaag zal schalen.
max-height: 100%;
height: 100%;
width: auto;
Dus om dit te voltooien heb ik ze allebei samengevoegd en het lijkt perfect te werken in alle browsers.
<style type="text/css">
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
/* probably not needed anymore, but doesn't hurt */
-o-object-fit: contain;
object-fit: contain;
}
</style>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img src="https://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
DEMOhttp://codepen.io/bootstrapped/pen/KwYGwq
Antwoord 4, autoriteit 5%
Hoewel uw vraag interessant is, verwacht ik niet dat er één antwoord op zal zijn. Misschien is je vraag te breed.
Uw oplossing moet afhangen van: andere inhoud in de navigatiebalk (aantal items), afmetingen van uw logo, moet uw logo responsief zijn, enz.
Het toevoegen van het logo in de a (met navbar-merk) lijkt een goed uitgangspunt. Ik zou de klasse navbar-brand moeten gebruiken omdat dit een opvulling (boven / onder) van 15 pixels zal toevoegen.
Ik test deze instelling op http://getbootstrap.com/examples/navbar/met een logo van 300×150 pixels.
Volledig scherm > 1200:
tussen 768 en 992 pixels (menu niet samengevouwen):
<768 (menu samengevouwen)
Behalve de esthetische aspecten heb ik geen enkel technisch probleem gevonden. Op kleine schermen zal een groot logo de viewport overlappen of misschien uitbreken.
Schermen tussen 768 en 992 pixels hebben ook andere problemen wanneer de inhoud niet in een lijn past, zie bijvoorbeeld: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
De standaardnavbar heeftHet standaardnavbarvoorbeeld voegt een ondermarge van 30px toe, zodat de inhoud van uw navigatiebalk nooit de inhoud van uw pagina mag overlappen. (vaste navigatiebalken zullen problemen hebben wanneer de hoogte van de navigatiebalk varieert).
Je hebt wat CSS- en mediaquery’s nodig om de navigatiebalk aan te passen aan je behoeften op verschillende schermformaten. Probeer uw vraag te beperken. zijn. beschrijf het probleem dat je op Android hebt gevonden.
updatezie http://bootply.com/77512voor een voorbeeld .
Op kleinere schermen, zoals een telefoon, verschijnt het samengevouwen menu boven het logo
verwissel de knop en het logo in uw code, logo eerst (zet float:left op het logo)
Er is geen manier om de menu-items op iets anders af te stemmen dan bovenaan
stel de margin-topin voor .navbar-collapse ul. Gebruik logohoogte minus navigatiebalkhoogte om uit te lijnen met de onderkant of (logohoogte – navigatiebalkhoogte) / 2 om te centreren
Antwoord 5, autoriteit 5%
Instructies voor het maken van een bootstrap-navigatiebalk met een logo dat groter is dan de standaardhoogte (50px):
Voorbeeldmet een logo 100px x 100px, standaard CSS:
-
Bereken de hoogte en (opvulling boven + opvulling onderaan) van het logo. Hier 120px(100px hoogte + opvulling boven (10px) + opvulling onder (10px))
-
Ga naar bootstrap / aanpassen. In plaats van navigatiebalkhoogte50px > 120px(50 + 70) en navbar-collapse-max-heightvan 340px tot 410px(340 + 70). Downloadcss.
-
In dit voorbeeld gebruik ik deze navigatiebalk. In navbar-brand:
<div class="navbar-header"> ... </button> <a class="navbar-brand myLogo" href="#"> <img src="yourLogo.jpg" /> </a> </div>...voegeen klasse toe, bijvoorbeeld myLogo, en een img(uw logo)
<a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>. -
Voeg CSS
toe
.mijnLogo {
opvulling: 10px;
} -
Voldoende voor andere maten.
Antwoord 6, autoriteit 3%
Nou, ik heb eindelijk hetzelfde probleem werkend gekregen, hier is mijn oplossing en ik heb het op mijn site getest in alle drie de belangrijkste browsers: Chrome, Firefox en Internet Explorer.
Als u geen op tekst gebaseerd logo gebruikt, verwijder dan “navbar-brand” volledig omdat ik vond dat deze specifieke klasse de belangrijkste oorzaak was van het verdubbelen van mijn samengevouwen navigatiemenu.
Shout out naar user3137032 die me in de goede richting heeft geleid.
Je moet een aangepaste responsieve afbeeldingscontainer maken, ik heb de mijne “logo” genoemd
Hier is de bootstrap HTML-opmaak:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="@Url.Action(" About ", "Home ")">
<i class="glyphicon glyphicon-info-sign"></i> About
</a>
</li>
<li>
<a href="@Url.Action(" Contact ", "Home ")">
<i class="glyphicon glyphicon-phone"></i> Contact
</a>
</li>
<li>
<a href="@Url.Action(" Index ", "Products ")">
<i class="glyphicon glyphicon-tag"></i> Products
</a>
</li>
</ul>
</div>
</div>
</div>
En de CSS-code:
.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}
@media (max-width:480px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70% !important;
}
}
@media (max-width:400px) {
.logo img {
width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 75%;
}
}
@media (max-width:385px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70%;
}
}
@media (max-width:345px) {
.logo img {
width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 65%;
}
}
@media (max-width:335px) {
.logo img {
width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 60%;
}
}
@media (max-width:325px) {
.logo img {
width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 55%;
}
}
@media (max-width:315px) {
.logo img {
width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 50%;
}
}
De waarde in @media (MAX-WIDTH: X) kan variëren, afhankelijk van uw logo-afbeeldingenbreedte, de mijne is 368px. De percentages moeten mogelijk ook worden gewijzigd, afhankelijk van de grootte van uw logo. De eerste @media-query zou je drempel moeten zijn en de mijne was beeldbreedte (368px) + ingestorte knopgrootte (44px) + ongeveer 60px en het kwam naar 480px, waar ik de responsieve beeldschaling start.
Zorg ervoor dat u mijn scheermiddelsyntaxis uit de HTML-porties verwijdert. Laat me weten of het je probleem oplost, het vaste mijn.
EDIT: Sorry, ik heb je nummer van de Navbar Hoogte gemist. Er zijn een paar manieren om erover te gaan, persoonlijk compileer ik de bootstrap minder met de juiste Navbar-hoogte, voor mijn doeleinden gebruik ik 70px, en mijn beeldhoogte is 68 px. De tweede manier om te doen, is in het Bootstrap.CSS-bestand zelf, zoek naar “.navbar” en verander min-hoogte: naar de hoogte van uw logo.
Antwoord 7, Autoriteit 3%
Mijn oplossing is het toevoegen van css “display: inline-block” aan de img-tag.
<img style="display: inline-block; height: 30px; margin-top: -5px">
DEMO: jsfiddle
Antwoord 8, autoriteit 3%
Ik gebruik de img-responsive klasse en stel dan een max-width in op het aelement. Zoals dit:
<nav class="navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="mylogo.png">
</a>
</div>
</nav>
en de CSS:
.navbar-brand {
max-width: 50%;
}
Antwoord 9
U moet de code als volgt gebruiken:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style=""
src="/img/transparent-white-logo.png">
</a>
</div>
Klasse van A-tag moet “logo” zijn, niet navbar-brand.
Antwoord 10
Het hangt af van hoe lang je je logo wilt hebben.
De standaard <a>hoogte in de navigatiebalk is 20px, dus als je height: 20pxopgeeft in je logo, zal het mooi uitgelijnd zijn.
Maar dat is nogal klein voor een logo, dus waar ik voor koos was dit:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Brand">
<img style="height: 30px; margin-top: -5px;"
src="/img/brand.png">
</a>
</div>
Hierdoor wordt de afbeelding 30 px hoog en wordt de afbeelding verticaal uitgelijnd door een negatieve marge aan de bovenkant toe te voegen (5 px is de helft van het verschil tussen de opvulling op a en de grootte van de afbeelding).
U kunt ook de opvulling op het <a>-element wijzigen, bijvoorbeeld:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
<img style="height: 30px;"
src="/img/transparent-white-logo.png">
</a>
</div>
Antwoord 11
Snelle oplossing: maak een klas voor uw logoen stel de heightin op 28px. Dit werkt goed met de navigatiebalk op alle apparaten. Merk op dat ik zei werkt “GOED”.
.logo {
display:block;
height:28px;
}
Antwoord 12
Mijn aanpak is om VIER verschillende afbeeldingen van verschillende groottes op te nemen voor telefoons, tablets, desktops, grote desktops, maar slechts EEN te tonen met de responsieve hulpprogrammaklassen van Bootstrap, als volgt:
<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->
<a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
Opmerking: u kunt de commentaarregel vervangen door de verstrekte code. Vervang de php-code als je geen wordpress gebruikt.
Opmerking bewerken 2: Ja, dit voegt verzoeken toe aan uw server bij het laden van de pagina, wat een beetje langzamer kan gaan, maar als u een CSS-sprite-techniek op de achtergrond gebruikt, is de kans groot dat het logo niet wordt afgedrukt bij het afdrukken van een pagina en de code hierboven zou betere SEO moeten krijgen.
Antwoord 13
Het zou niet nodig moeten zijn om extra CSS toe te voegen, aangezien Bootstrap3 deze wel biedt. Tenzij je het wel wilt toevoegen.
Dit is mijn code om het logo links en links naar rechts te plaatsen.
Deze navigatie is responsive. Breng hier naar eigen inzicht wijzigingen in.
HTML:
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
<div class="container">
<a class="navbar-brand" href="#"><img style=" width: 150px;" src="image.jpg" alt="Image text"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Antwoord 14
Ik implementeer het ook via de CSS-achtergrondeigenschap. Het werkt gezond in elke breedtewaarde.
.navbar-brand{
float:left;
height:50px;
padding:15px 15px;
font-size:18px;
line-height:20px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
background-position: left center
}
Antwoord 15
Een andere benadering is het implementeren van Bootstrap’s ingebouwde .text-hideclassnaast .navbar-brandom de merktekst/inhoud te vervangen door een achtergrondafbeelding.
CSS:
.navbar-brand{
background: url(https://example.com/your-logo-here.png) center / contain no-repeat;
width: 200px;
}
HTML:
<a class="navbar-brand text-hide" href="#">Navbar Brand</a>
Dit is een zeer consistente methode en houdt je afbeelding gecentreerd. Om de grootte van de afbeelding aan te passen, hoeft u alleen maar de breedte van .navbar-brandaan te passen, aangezien de hoogte al is ingesteld.
Antwoord 16
Ik had hetzelfde probleem. Ik heb het als volgt opgelost:
<a href="#" class="btn btn-link navbar-btn">
<img class="img-responsive" src="#">
</a>
Er is geen klasse Navbar-merk. Het resultaat ziet eruit als logo-beeld dat Past op Navbar en werkt als een link. Ook raad ik aan om Navbar-rechtsklasse voor de menu-items te gebruiken, zodat ze niet onder het logo gaan.
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav" role="navigation">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
</ul>
</div>
Antwoord 17
Voeg het volgende toe aan de .navbar-brandklasse
.navbar-brand
{
padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}
.navbar-brand > img
{
height: 100%; // set height to occupy full height space on the navbar-brand
width: auto; // width should be auto to allow img to scale accordingly
max-height: 100%; // optional
margin: 0 auto; // optional
}
Antwoord 18
Misschien is dit te eenvoudig, maar ik heb net de Navbar-merklijn gekopieerd, dus er zijn twee van hen, de afbeelding en vervolgens de tekst.
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>
en ik creëerde een afbeelding die past in de Navbar (ongeveer 1/2 de hoogte).
Antwoord 19
Als u minder gebruikt, werkt dit:
@navbar-height: 150px;
@navbar-brand-vpadding: 10px;
.navbar-brand img {
height: @navbar-height - @navbar-brand-vpadding * 2;
position: absolute;
top: @navbar-brand-vpadding;
}
Antwoord 20
Deze code werkt perfect als u het merk gecentreerd wilt zien en met automatische breedte in de werkbalk.
Het bevat de WordPress-functie om het afbeeldingsbestand van het juiste pad te krijgen:
<a class="navbar-brand page-scroll" rel="home"
href="#page-top" title="Title">
<img style="height: 100%; width: auto;"
src="<?php echo get_template_directory_uri();?>/img/logo.png">
Antwoord 21
mijn werkende code – bootstrap 3.0.3.
wanneer navbar-toggle, hidden-xs originele logo afbeelding.
<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
</a>
<a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
</a>
Antwoord 22
U kunt proberen de @media-query te gebruiken, zoals hieronder.
Voeg eerst een logoklasse toe en gebruik vervolgens @media om de hoogte en breedte van uw logo per apparaatgrootte op te geven. In het onderstaande voorbeeld richt ik me op apparaten met een maximale breedte van 320px (iPhone). Je kunt hiermee spelen totdat je de beste pasvorm vindt. Gemakkelijke manier om te testen: gebruik chrome of Firefox met inspect-element. Verklein uw browser zo ver mogelijk. Let op de wijziging van de logogrootte op basis van de maximale breedte van @media die u opgeeft. Test op iPhone, Android-apparaten, iPad enz. om de gewenste resultaten te krijgen.
.logo {
height: 42px;
width: 140px;
}
@media (max-width:320px) {
.logo {
height: 33px;
width: 110px;
}
}
Antwoord 23
Probeer de volgende code:
<style>
.navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
<img src="https://placehold.it/140x34/000000/ffffff/&text=LOGO" alt="">
</a>
Antwoord 24
Maken in mijn geval in mijn geval (ik heb waarschijnlijk niet de intelligentietest gepasseerd) en na enige experimentatie, dit is wat ik gebruik (wat volgens mij in de buurt is van de standaard standaard van Bootstrap):
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-logo">
<a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
<img src="~/Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
<li>@Html.ActionLink("Resources", "Resources", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Blog", "Blog", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
</div>
En in het CSS-bestand heb ik het volgende toegevoegd:
.navbar-brand {
padding-top: 5px;
}
.navbar-collapse {
float: left;
}
.navbar-logo {
float: left;
}
Merk op dat @Html.ActionLink()de Razor-syntaxis is voor een <a>-tag. Waar @Html.ActionLink(...)staat, vervang het gewoon door een geschikte <a>-tag. Waar het zegt @Url.Action(...)vervang het door een geschikte URL (geen <a>tag in dat geval).
Antwoord 25
Dit is niet semantisch, maar ik gebruik gewoon het bestaande element a, stel een achtergrondafbeelding in en maak vervolgens meerdere variaties voor @2x-resolutie, kleinere schermformaten, enz.
Vervolgens kun je de klasse .text-hidegebruiken om op de ouderwetse manier wat tekst op de pagina te krijgen. Eenvoudig en effectief, maar niet correct gebruik van een afbeelding.
Hier is een link naar de helperklasse voor tekstvervanging:
http://getbootstrap.com/css/#helper-classes
Antwoord 26
Het gemakkelijkste en beste antwoord op deze vraag is om een maximale breedte en hoogte in te stellen, afhankelijk van uw logo. De afbeelding is maximaal 50 px hoog, maar niet langer dan 200 px.
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
Dit is afhankelijk van de grootte van je logo en de items in de navigatiebalk die je hebt.
Antwoord 27
<header class="navbar navbar-inverse header-outer" role="banner">
<div class="container form-inline">
<img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />
<div class="pull-right padding-top">
<form class="hidden-xs" role="form">
<div class="form-group" style="padding-left:10px">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="form-group navbar-remember">
<label class="white-font">
<input type="checkbox" class="white-font"> Remember me
</label>
</div>
<button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
</form>
</div>
</div>
</header>
Begrijp de code a.u.b. naar eigen inzicht 😀 Dit is mijn conceptcode en het werkt al 🙂 Hier is de schermafbeelding.
Antwoord 28
In plaats van tekstbranding te vervangen, verdeelde ik het in twee rijen zoals in de onderstaande code en gaf ik de klasse img-responsiveaan de afbeelding……
<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
<div class="container" style="margin-bottom:-1px;">
<div class="row">
<div class="col-md-3">
<div id="menubar-logo">
<a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
</div>
</div>
<div class=" col-md-offset-3 col-md-6">
<ul class="nav navbar-nav">
<li><a href="index.php" class="active">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
<!-- end of "row" -->
</div>
<!-- end of "container" -->
</div>
<!-- end of "collapse" -->
En bovendien voegde ik de volgende CSS-codes aan …….
#menubar-logo img {
margin-top: 10px;
margin-bottom: 20px;
margin-right: 10px;
}
Als mijn code uw probleem oplost, is het mij een genoegen …..
Antwoord 29
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"></ul>
//Vergeet niet om bootstrap toe te voegen aan de kop van je code.