0

por ejemplo el left que sale por defecto, intente modificando el archivo bootstrap.css y bootstrap.min.css y no obtuve respuesta.

foto

4
  • 2
    Buenas, deberías poner el código escrito y no con una imagen para que tu pregunta sea bien aceptada por la comunidad, y para que los que te vayan a ayudar puedan copiarlo y realizar pruebas.
    – Marc
    el 29 dic. 2017 a las 7:25
  • 1
  • utilice una captura para que me entienda mejor, el código esta mas abajo - gbianchi+ el 3 ene. 2018 a las 17:35
  • Huski mira como aparece aplicandole el .resetear, esta al final de este post, en imagen para que me conprendas el 3 ene. 2018 a las 17:38

3 respuestas 3

0

No es recomendable tocar el fuente de bootstrap. Lo que acostumbramos es crear un css totalmente aparte con nuestros estilos propios (estilos.css) allí se colocan todos los cambios a los estilos de bootstrap (adaptaciones a tu sistema) y nuevos estilos que diseñes.

Alternativa 1:

Lo que haces es que donde te interese tener los estilos de bootstrap "editados" cargas tu estilos.css justo después del de bootstrap. Así:

<link type="text/css"  href="../css/bootstrap.css" rel="stylesheet"/>
<link type="text/css"  href="../css/estilos.css" rel="stylesheet"/>

siendo href la url que tengas relativa o absoluta (como la uses) de tu proyecto a donde estan ubicados los archivos de estilos. De esta forma se carga primero los estilos de bootstrap y al incluir estilos.css justo después se "modifican" las clases existentes de bootstrap con tus preferencias más las nuevas clases que tengas propias.

Ejemplo:

Archivo bootstrap.css tienes el botón color rojo que indica "advertencia" o proceso critico cuya clase en css esta representada por "btn" (atributo que da forma al botón) en conjunto con "danger" (que le brinda el color rojo y demás):

.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}

Pero tu no quieres que sea ese tono de rojo ni mucho menos que las letras del botón sean blancas porque no combina con tu sistema, quieres en vez de eso las letras negras y un tono intenso de color rojo... Entonces para modificar esto sencillamente en estilos.css colocas:

.dangermod {
  color: #000;
  background-color: #ff0000;
}

Fijate que el atributo border-color que aparece en la hoja de estilos de bootstrap no lo toqué en nuestra hoja de estilos (estilos.css) que indica eso? pues que tomará por defecto la configuración de bootstrap ya que no la modificamos.

Entonces el boton en html sería:

<button type="submit" class="btn btn-danger dangermod"> Boton</button>

Alternativa 2:

Por otra parte también es aceptado que si el cambio de estilo es ínfimo (como lo refiere tu ejemplo que es sólo el cambio de un atributo de la clase) y además no piensas repetirlo en todos los demás formularios o archivos puedes incluir en el de ese formulario el estilo modificado para que solo lo guarde o utilice ese archivo nada más. De esta forma en el :

<head> 

<style type="text/css">
   .dangermod {
      color: #000;
      background-color: #ff0000;
      border-color: #ffffff;
    }
</style>

</head>

<body><button type="button" class="btn dangermod"></body>

Alternativa 3:

Colocas directo en el elemento (no tan recomendable) el estilo modificado. Siguiendo el ejemplo del botón sería así:

 <body>
<button type="button" class="btn-danger" style="background-color:#ff0000; color: #000;"> Boton</button>
</body>

De esta forma logras editar sólo en ese elemento el estilo y adaptarlo pero sin alterar el fuente del bootstrap que repito no es recomendable modificarlo.

Alternativa 4: Si ninguna de las anteriores te sirve pues no queda mas que agregues esta clase a tu archivo de estilos (recomendado) o al archivo directo que quieres modificar (no es recomendable):

.resetear {
  animation : none;
  animation-delay : 0;
  animation-direction : normal;
  animation-duration : 0;
  animation-fill-mode : none;
  animation-iteration-count : 1;
  animation-name : none;
  animation-play-state : running;
  animation-timing-function : ease;
  backface-visibility : visible;
  background : 0;
  background-attachment : scroll;
  background-clip : border-box;
  background-color : transparent;
  background-image : none;
  background-origin : padding-box;
  background-position : 0 0;
  background-position-x : 0;
  background-position-y : 0;
  background-repeat : repeat;
  background-size : auto auto;
  border : 0;
  border-style : none;
  border-width : medium;
  border-color : inherit;
  border-bottom : 0;
  border-bottom-color : inherit;
  border-bottom-left-radius : 0;
  border-bottom-right-radius : 0;
  border-bottom-style : none;
  border-bottom-width : medium;
  border-collapse : separate;
  border-image : none;
  border-left : 0;
  border-left-color : inherit;
  border-left-style : none;
  border-left-width : medium;
  border-radius : 0;
  border-right : 0;
  border-right-color : inherit;
  border-right-style : none;
  border-right-width : medium;
  border-spacing : 0;
  border-top : 0;
  border-top-color : inherit;
  border-top-left-radius : 0;
  border-top-right-radius : 0;
  border-top-style : none;
  border-top-width : medium;
  bottom : auto;
  box-shadow : none;
  box-sizing : content-box;
  caption-side : top;
  clear : none;
  clip : auto;
  color : inherit;
  columns : auto;
  column-count : auto;
  column-fill : balance;
  column-gap : normal;
  column-rule : medium none currentColor;
  column-rule-color : currentColor;
  column-rule-style : none;
  column-rule-width : none;
  column-span : 1;
  column-width : auto;
  content : normal;
  counter-increment : none;
  counter-reset : none;
  cursor : auto;
  direction : ltr;
  display : inline;
  empty-cells : show;
  float : none;
  font : normal;
  font-family : inherit;
  font-size : medium;
  font-style : normal;
  font-variant : normal;
  font-weight : normal;
  height : auto;
  hyphens : none;
  left : auto;
  letter-spacing : normal;
  line-height : normal;
  list-style : none;
  list-style-image : none;
  list-style-position : outside;
  list-style-type : disc;
  margin : 0;
  margin-bottom : 0;
  margin-left : 0;
  margin-right : 0;
  margin-top : 0;
  max-height : none;
  max-width : none;
  min-height : 0;
  min-width : 0;
  opacity : 1;
  orphans : 0;
  outline : 0;
  outline-color : invert;
  outline-style : none;
  outline-width : medium;
  overflow : visible;
  overflow-x : visible;
  overflow-y : visible;
  padding : 0;
  padding-bottom : 0;
  padding-left : 0;
  padding-right : 0;
  padding-top : 0;
  page-break-after : auto;
  page-break-before : auto;
  page-break-inside : auto;
  perspective : none;
  perspective-origin : 50% 50%;
  position : static;

  quotes : '\201C' '\201D' '\2018' '\2019';
  right : auto;
  tab-size : 8;
  table-layout : auto;
  text-align : inherit;
  text-align-last : auto;
  text-decoration : none;
  text-decoration-color : inherit;
  text-decoration-line : none;
  text-decoration-style : solid;
  text-indent : 0;
  text-shadow : none;
  text-transform : none;
  top : auto;
  transform : none;
  transform-style : flat;
  transition : none;
  transition-delay : 0s;
  transition-duration : 0s;
  transition-property : none;
  transition-timing-function : ease;
  unicode-bidi : normal;
  vertical-align : baseline;
  visibility : visible;
  white-space : normal;
  widows : 0;
  width : auto;
  word-spacing : normal;
  z-index : auto;
}

Luego donde tienes el tooltip (que según tu imagen veo que es en el div) colocas en su clase este estilo .resetear de último y así devuelves todo a formato por "defecto" o "reseteas" los estilos del elemento. Que es la respuesta exacta a tu pregunta.
11
  • Lo que pasa amigo es que al poner el mouse encima a parte de que aparece el Tooltip, me crea un div despues de ese Td en la misma fila ocasionandome problemas de estilos el 30 dic. 2017 a las 1:25
  • Pero eso no fue lo que preguntaste en un principio además que estoy respondiendo a tu pregunta original que incluso combinaba con el titulo que le colocaste. Además con la respuesta que te dejo claramente puedes solucionar ese problema de estilos. Es la mejor ayuda que puedes recibir en vista de que no suministras ningún código
    – Art_Code
    el 30 dic. 2017 a las 1:30
  • Amigo y como hago para acceder a ese Div que se crea?, por que solo existe cuando le pongo el mouse encima el 30 dic. 2017 a las 1:36
  • Es facil en tu navegador. Te vas a archivo o menú luego click en "desarrollo" o "herramienta para desarroladores" encontraras una nueva parte en tu navegador que te muestra varias pestañas, das click en "elements" o "elementos" luego al primer icono que tienes a tu izquierda y te situas con el puntero del mouse en donde sale la ventana el div que mencionas. Cuando salga le das click sobre él y la herramienta apuntará justo el código asociado a ese div y a la derecha los estilos. Desde allí solucionas
    – Art_Code
    el 30 dic. 2017 a las 1:42
  • Si amigo eso ya lo se, inspeccionar elemento cierto?, Lo intente pero al momento de quitar el mouse desaparece el div, entonces no le puedo ni cambiar los estilos del inspeccionador. el 30 dic. 2017 a las 2:15
0

Detectando los eventos y haciendo cambias junto a ellos. Tomo como referencia la ultima version de Bootstrap pero es siempre el mismo funcionamiento pero cambiando algunos detalles de nombre de eventos siempre llegamos a el mismo resultado.

Bootstrap 4 - Tooltips

$('#myTooltip').on('shown.bs.tooltip', function () {
  $(this).css({
    'left': 0,
    'top': 0
  });
})
0

introducir la descripción de la imagen aquí

amigo ahora me sale bien solo en el numero del codigo me ocupa toda la tabla y corre el resto a la derecha

introducir la descripción de la imagen aquí

Amigo ahora haciendo pruebas vi que era el display, lo puse en display: table-caption; Y asi que como en la segunda imagen, pero no queda bien el resetear lo puse en

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.