20
Antes que nada, quiero aclarar que no conozco Angular, y asumo por lo que dice el OP que la estructura del HTML generado no se puede modificar por algún motivo.
El problema en este caso y por el cual no funciona el código con Bootstrap 4 (pero sí con Bootstrap 3), es porque la versión 4 utiliza flexbox para generar sus layouts de grillas, mientras la ...
respondida el 31 mar. 18 a las 16:15
Shaz
27.9k1111 medallas de oro3636 medallas de plata5858 medallas de bronce
14
Si usas jquery puedes utilizar el método .hover() y agregarle la funcion trigger para lanzar el método onclick
$('#dmenu').hover(function(){
$('#navbarDropdown').trigger('click')
//console.log('hover');
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-...
9
Bootstrap trabaja con primero filas luego columnas:
Por la tanto primero creamos una fila que contendrá 2 columnas:
Dentro de la primera columna insertamos un div vacío, luego en la siguiente columna insertamos dos filas más que internamente tendrán 3 columnas.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo de la ...
9
Vamos por partes, primero la lógica del modal viene de:
Seleccionas un marker en el mapa.
Aparece un popup pequeño con un botón de ver detalles.
Si le das click en el botón de ver detalles, te debe salir un modal con los datos del marker
Ahora bien, vamos re-formulando el código que tienes:
marker = new L.marker([item.lat, item.lng], {icon: instIcon})
...
respondida el 21 dic. 19 a las 1:22
fredyfx
11.4k77 medallas de oro2727 medallas de plata5353 medallas de bronce
8
El problema que tienes es que ese borde es el "foco" del botón. Es decir, marca que el botón tiene el foco activo tras haberlo pulsado.
Puedes quitar el foco mediante javascript o bien eliminar ese borde mediante CSS.
Soltar el foco con javascript
Podemos hacer uso de HTMLElement.blur() para quitar el foco tras pulsar (evento onclick) el botón:
<...
respondida el 9 ene. 18 a las 9:45
OscarGarcia
22.5k33 medallas de oro2121 medallas de plata5656 medallas de bronce
8
Si solo tienes un acordeón por página, la solución más sencilla es quitar el atributo data-parent:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper....
respondida el 22 mar. 18 a las 18:02
Shaz
27.9k1111 medallas de oro3636 medallas de plata5858 medallas de bronce
8
Para alinear elementos a la derecha dentro de un navbar, Bootstrap cuenta con la clase .ml-auto que se aplica a las listas <ul>, esto es posible si se usa Flexbox.
Lo que hace esta clase es "empujar" los elementos hacia la derecha asignando un margen automático a la izquierda.
La clase .float-right no te funciona porque entra en conflicto con los ...
respondida el 5 ago. 19 a las 15:20
Jheyman Mejia
3,63433 medallas de oro1717 medallas de plata4545 medallas de bronce
7
El truco es ponerle una posición relativa al padre y una absoluta al nombre. De ese modo se colocará de manera absoluta con respecto al padre.
#content_div_one_photo {
height: 16rem;
width: 11rem;
border-radius: 10px;
border: 5px solid black;
}
#padre {
position: relative; /* para poder posicionar el texto de forma absoluta */
...
respondida el 5 mar. 18 a las 19:12
7
primero que nada, te recomiendo que leas la documentación de bootstrap que es simplemente espectacular, con pegarle una leida evitarás este tipo de problemas!
En tu código tenes 3 problemas.
Los ID deben ser únicos en HTML/CSS/JS
El Atributo name (en caso de ser un checkbox) también suele ser único
La estructura de tu checkbox no se corresponde a la de la ...
respondida el 7 dic. 18 a las 12:35
Juan Salvador Portugal
6,43266 medallas de oro1414 medallas de plata3535 medallas de bronce
7
Ya te estuve ayudando con eso el otro día. Tienes que cargar las librerías correctas. Estás tratando de usar dos librerías diferentes. Por un lado datepicker, que pertenece a JQueryUI y cuya librería no estabas cargando, y por otro lado datetimepicker que pertenece a la librería Tempus Dominus (antes pertenecía al propio Bootstrap pero ahora se ha ...
respondida el 12 ago. 19 a las 11:26
phpMyGuel
11.9k11 medalla de oro1515 medallas de plata3737 medallas de bronce
6
Para que los li en Bootstrap 4 se queden marcados hay que agregar la clase active, lo puedes hacer en Javascript.
Primero agregarle un id a los li
<li class="nav-item" id="tab-index">
<a class="nav-link" href="index.php">Inicio</a>
</li>
<li class="nav-item" id="tab-conocenos">
<a class="nav-link" href="conocenos....
respondida el 12 abr. 18 a las 9:28
Emiliano Montesdeoca
92922 medallas de plata1010 medallas de bronce
6
Esta nav va a tener algo más que el botón, como por ejemplo una lista de items? Porque si solo vas a poner el botón creo que es mejor hacerlo en un div y no en una nav.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="card">
&...
5
Tu único error era tu selector, estabas seleccionando
.portafolio .galeria .contendor-imagen:hover img {}
Cuando realmente debería ser:
.portafolio .galeria .contenedor-imagen:hover img{}
Adicional he agregado una transición para que el efecto se vea más animado y el usuario tenga una mejor experiencia visual.
.portafolio {
background: #fff;
...
respondida el 21 dic. 17 a las 2:00
Bender Paisa
12k44 medallas de oro1919 medallas de plata3838 medallas de bronce
5
Glyphicon dejó de estar disponible para Bootstrap4.
Puede usar tanto Font Awesome como Github Octicons como una alternativa gratuita para Glyphicons.
En la documentación oficial de Bootstrap4 Icons colocan algunas opciones para los Iconos y es donde se nota que no esta disponible glyphicon
Bootstrap4 también cambió de Less a Sass, por lo que puede ...
respondida el 29 ene. 19 a las 5:22
Cesar Romero
1,94933 medallas de oro1212 medallas de plata2424 medallas de bronce
5
Si te fijas en el <div> que contiene el texto, este, además de tener un position: absolute tiene un bottom: 20px. Estas reglas en conjunto provocan que el texto esté a 20px de la parte de abajo del carrusel. Cambiando bottom por top puedes hacer que esté a los píxeles que necesites contando desde la parte de arriba.
Añadiendo la regla background-color:...
respondida el 11 sep. 19 a las 8:54
phpMyGuel
11.9k11 medalla de oro1515 medallas de plata3737 medallas de bronce
5
Hice una prueba con el código que publicaste y no se muestra así. Se muestra centrado pero un poco hacia la izquierda, lo que corregí quitando esto del css:
table{
position:relative;
margin:auto;
width:100%;
/*left:-15%*/;
}
5
La tabla se está corriendo hacia la derecha de la página porque estás asignando un ancho fijo a la sección que contiene tu tabla:
section {
position: relative;
margin: auto;
width:400px;
}
Adicional a esto, te recomiendo no incluir varias columnas dentro de otras cuando no es necesario.
table {
position: relative;
margin: auto;
...
respondida el 20 sep. 19 a las 15:18
Jheyman Mejia
3,63433 medallas de oro1717 medallas de plata4545 medallas de bronce
5
Para cambiar el orden de los elementos se usa z-index. El valor debe ser auto o un número entero. Un elemento con mayor valor cubre a otro con menor valor así que debes especificar un número mayor que 0 y distinto de auto.
El problema radica entonces que tu elemento con clase seccion no es un elemento posicionado y por lo tanto la propiedad z-index no tiene ...
respondida el 10 dic. 19 a las 14:49
devconcept
12k22 medallas de oro3535 medallas de plata5555 medallas de bronce
5
Bueno deberías quitar la clase denominada clearfix ya que esta esta encaminada a:
Easily clear floats by adding .clearfix to the parent element.
Es decir (no es traducción):
Nos ayuda a que una etiqueta padre pueda contener a los hijos que tenga y estos tengan la naturaleza flotante, para que de esta manera evitemos queden por fuera de la antes ...
respondida el 8 abr. 20 a las 21:38
BetaM
26.7k77 medallas de oro2424 medallas de plata4848 medallas de bronce
4
Para centrar el contenido en tu círculo puedes utilizar flex.
#circulo {
width: 10rem;
height: 10rem;
border-radius: 50%;
background: red;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#circulo > p {
font-family: sans-serif;
color: white;
font-size: 1rem;
font-weight: bold;
}
<div id=...
respondida el 21 sep. 17 a las 15:39
dddenis
3,72333 medallas de oro2121 medallas de plata4545 medallas de bronce
4
Las clases hidden-* fueron eliminadas en la version 4 de bootstrap, ahora tienes que utilizar "d-none d-lg-block" para ocultar en todos los tamaños menos en el largo.
4
Debes agregar un position: fixed a tu nabvar, de esta manera:
/*MENU*/
.topnav {
background-color: #E4276B;
overflow: hidden;
/*aqui esta el cambio*/
position: fixed;
width: 100%;
top: 0;
left: 0;
/*fin del cambio*/
}
#maint {
font-family: "satisfy";
font-size: 2.2vw;
font-size: 2.2vh;
}
...
respondida el 12 feb. 18 a las 16:14
Aníbal Jorquera
1,06633 medallas de plata1111 medallas de bronce
4
Tienes que añadir la clase .active al li correspondiente, pero para que te funcione te falta añadir la clase .navbar-nav al ul
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<nav ...
respondida el 12 abr. 18 a las 9:38
Pablo Lozano
38k77 medallas de oro4343 medallas de plata8080 medallas de bronce
4
Puedes hacerlo dandole la clase valores a las lineas en lugar de a los th asi:
$("#ok").click(function() {
var info=[];
$(".table").find("tr.valores").each(function() {
var row = [];
var flag = false;
$(this).children().each(function() {
var input = $(this).find('input');
...
respondida el 3 may. 18 a las 18:59
alanfcm
19.5k44 medallas de oro1414 medallas de plata3333 medallas de bronce
4
Puedes darle estilo al seudoelemento placeholder.
#input_id::placeholder {
color:white;
}
Pero esa especificación no es estándar y sólo funcionará en navegadores recientes. (Chrome 57+, Firefox 51+, Opera 44+ y Safari 10.1+)
Para proveer compatibilidad con versiones anteriores (y con Internet Explorer o Edge), tendrás que darle estilo con prefijo para ...
4
Debes crear una referencia al Dialogo Modal (NgbModalRef) para poder manipularlo en el template o en el codigo.
<h1>Ejemplo formulario</h1>
<button (click)="open(content)">Abrir</button>
<button (click)="cerrar('Adios')">Cerrar</button>
<ng-template #content let-modal>
<div class="modal-header">
<h4 ...
4
Si vas a trabajar el container con sólo 3 columnas y deseas que se mantengan en una misma fila sin importar la resolución puedes usar la clase col sin más. Bootstrap hace el resto del trabajo automático, dividiendo entre 12 la cantidad de columnas que agregues al contenedor.
Fuente
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/...
respondida el 21 ene. 19 a las 14:06
Jheyman Mejia
3,63433 medallas de oro1717 medallas de plata4545 medallas de bronce
4
Con slideToggle() funciona bien. Te dejo un ejemplo:
$('.dropdown').on('show.bs.dropdown',function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideToggle(1000);
});
$('.dropdown').on('hide.bs.dropdown',function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideToggle(1000);
});
<link rel="stylesheet" ...
respondida el 17 feb. 19 a las 19:19
Kiko_L
6,13811 medalla de oro99 medallas de plata2424 medallas de bronce
4
El tema de los botones disabled no se gestiona por clase, podrías hacerlo con las propiedades oportunas de CSS, pero para eso el elemento button tiene un atributo propio, disabled.
En este fragmento no voy a quitar el proceso de añadir y quitar clase que has definido anteriormente, pero sí que incluyo la gestión del atributo disabled del botón que mencionas....
respondida el 10 may. 19 a las 13:59
Fernando Carrascosa
1,70811 medalla de plata1515 medallas de bronce
Solo están habilitadas las respuestas de wiki más votadas con una longitud mínima y que no pertenecen a la comunidad
Etiquetas relacionadas
bootstrap-4 × 445css × 134
bootstrap × 128
html × 116
html5 × 96
javascript × 75
jquery × 74
css3 × 50
php × 30
angular × 20
modal × 17
laravel × 10
ajax × 10
c# × 9
bootstrap-3 × 9
responsive × 9
bootstrap-carousel × 8
datatables × 7
laravel-blade × 7
asp.net × 6
wordpress × 6
asp.net-mvc × 6
vue.js × 6
formularios × 6
reactjs × 5