html - examples - ¿Cómo crear Breadcrumbs responsivo en materializecss?

navbar materialize

Question

Estoy usando materializecss para el front end En mis páginas jsp, estoy usando Breadcrumbs para mostrar información en la parte superior de la página. Está funcionando bien, pero cada vez que veo mis páginas en el navegador móvil o en una pantalla pequeña, no aparece Breadcrumbs completo. Entonces, ¿cómo hacer respuesta alguna sugerencia?

<div class="section" style="padding-bottom:0;">
            <div class="row">
                <nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;">
                    <a class="breadcrumb" href="<c:url value="/"/>">Home</a>
                    <a class="breadcrumb" href="<c:url value="/${currentCityName}"/>">${currentCity.name}</a>
                    <c:forEach items="${breadCategories}" var="c">
                        <c:set var="puri"><catalog:CategoryUri category="${c}"/></c:set>
                        <a class="breadcrumb" href="<c:url value="/${currentCityName}${puri}"/>">${c.name}</a>
                    </c:forEach>                
                    <a class="breadcrumb" href="javascript:;">${product.name}</a>
                </nav>                   
            </div>
        </div>

Answer 1

Además de cambiar de l12 to s12 , tiene otro problema.

La razón por la que se cortan las migas de pan se debe a la clase truncate . Por diseño, Materialise cortará cualquier contenido que exceda el tamaño del contenedor / pantalla. Materializar Documentación sobre Ayudantes

Intenta eliminar esta clase. Entonces es posible que tenga otros problemas de estilo, pero ya no se debe cortar.

Answer 2

En mi opinión, para el dispositivo móvil puede ignorar la parte de navegación, ya que no se ve bien en una pantalla móvil. Por lo tanto, sería un desperdicio de espacio.

p.ej:

@media only screen and (max-width : 992px) {
   .breadcrumb-nav {
      display:none;
   }
}

O también puede reducir el tamaño de fuente de su ruta de navegación:

@media only screen and (max-width : 992px) {
   .breadcrumb-nav {
      font-size:;
   }
}

Answer 3

Modificar este código aquí es un ejemplo.

<nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>

Answer 4

No estoy completamente seguro, pero podría funcionar si reemplaza

<nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;">

con

<nav class="breadcrumb-nav col s12 truncate" style="height:40px; line-height: 40px;">

La diferencia es que l12 se convierte en s12. esto indica que se materialicen para dar a las migas de pan 12 columnas en pequeño y más alto.

Answer 5

Su ruta de navegación se está apagando en la pantalla del dispositivo móvil, por lo que necesita revisar su css móvil y probar este, esto podría ayudarlo.

<nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;">

A

<nav class="breadcrumb-nav col s12 truncate" style="height:40px; line-height: 40px;">

Aquí está la reference que podría ser útil para usted.

Answer 6

puede agregar un estilo de word-wrap: break-word en el texto, y creo que funcionará bien