He probado todo el código de ejemplo por ahí, pero por alguna razón yo no puedo hacer lo siguiente:

+-------------------------------------------------------------------------------+
|               |                                        Login  [ search   ]    |
|  SITE LOGO    |---------------------------------------------------------------+
|               |                      Page 1  |  Page 2 |  Page 3 |  Page 4    |
+-------------------------------------------------------------------------------+

Me estoy sintiendo como que no hay manera de hacer este trabajo. Estoy tratando de esto en vano?

InformationsquelleAutor ATL_DEV | 2012-11-14

2 Comentarios

  1. 55

    Es posible, pero creo que usted está realmente empujando los límites/propósito de la TBS. Utilizando su propio marcado podría simplificar en gran medida el DIV-sopa que se requiere para hacer este trabajo en la TBS.

    ACTUALIZACIÓN: Véase más abajo para las replicaciones de esta solución que he hecho usando Twitter Bootstrap 3. El original de la pregunta y la respuesta fueron para el Bootstrap 2.

    El Violín Ejemplo

    TWITTER BOOTSTRAP 3 ACTUALIZACIONES:

    El marcado para TBS3 la navbar cambiado levemente, como lo hizo su andamiaje. Aquí hay dos repeticiones de la mi de la solución original, que coincide con el original exactamente, y una variación.

    La Réplica Exacta
    http://jsfiddle.net/technotarek/t67Ms/

    De replicación con todo el Ancho de barra de exploración
    http://jsfiddle.net/technotarek/HxvLS/

    (Pista, usted puede ajustar la segunda replicación, de modo que todos los elementos internos abarcan toda la barra de navegación, mediante la eliminación de la div.elemento contenedor que sigue inmediatamente después de la etiqueta nav.)

    • Para el Violín, asegúrese de ampliar la ventana de resultado de al menos 940px de ancho.
    • Wow! ¡Caramba! Gracias! Yo no soy digno… Esto llevó muchas horas de experimentación y yo no podía conseguir que esto funcione. La mayor diferencia entre mi malogrado implementación y el tuyo es que se crea la columna y, a continuación, las dos filas dentro de ella. Yo lo hice al revés. He creado dos filas y las columnas en su interior. El problema con el BPS y CSS, en general, es que las etiquetas y CSS se vuelve tan confuso que rompen con todo y empezar de nuevo. Gracias de nuevo. Me gustaría que me podría otorgar algunos puntos extra.
    • Usted hace un buen punto acerca de la creación de su propio componente, pero el viento hasta la recreación de una gran cantidad de funcionalidad y apariencia que usted obtenga de forma gratuita si se utiliza el estándar de aplicación. He encontrado los nombres de clase se utilizan para elementos de identidad en sus JS la aplicación. Habría sido agradable si se utilizan las etiquetas de datos para este propósito. Usted, sin embargo, conseguir un más marcado semántico y no aguada, muellemente o espinosas DIVS. En la última página de ejemplo, tienen un marketing sitio donde circunvalación de la barra de navegación completo.
    • Esto es fantástico y también estoy haciendo uso de ella. Gracias. Sin embargo, hay un pequeño error, he visto: <li><a href=»#»>Página 4</a><li> La última <li> debe ser una etiqueta de cierre, las necesidades de la «/».
    • Thx @NutterzUK. Fijo.
    • ¿Este ejemplo tiene el colapso de las instalaciones para pequeños dispositivos..? estoy tratando de éste, pero no colapso en la resolución pequeña como la predeterminada de la barra de navegación, no? ¿tengo que hacer algún cambio.?
    • Yo excluidos que a partir de mis ejemplos, pero usted debería ser capaz de volver a incorporar muy fácilmente.
    • asi lo tengo ahora, sólo necesitaba una aclaración antes de integrar en mi proyecto. Gracias por la respuesta.
    • Cómo acerca de si desea que la barra de navegación, para ser plegable?

  2. 0

    Que usted necesita para hacer dos divs en el encabezado, el de la izquierda y la derecha. A continuación, en el derecho div, usted necesita para poner otro dos divs.

    HTM Idioma:

    CSS:

    Espero haber ayudado 😀

Dejar respuesta

Please enter your comment!
Please enter your name here