Cambiar el ancho del popover Bootstrap
Estoy diseñando una página usando Bootstrap 3. Estoy intentando usar una ventana emergente con placement: rightun elemento de entrada. El nuevo Bootstrap garantiza que, si lo usa, form-controlbásicamente tendrá un elemento de entrada de ancho completo.
El código HTML se parece a esto:
<div class="row">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text"
data-toggle="popover" data-trigger="hover"
data-content="My popover content.My popover content.My popover content.My popover content." />
</div>
</div>
El ancho de los popovers es demasiado bajo, en mi opinión, porque no queda ningún ancho en el div. Quiero el formulario de entrada en el lado izquierdo y una ventana emergente amplia en el lado derecho.
Principalmente, estoy buscando una solución en la que no tenga que anular Bootstrap.
El JsFiddle adjunto. La segunda opción de entrada. No he usado mucho jsfiddle, así que no lo sé, pero intente aumentar el tamaño del cuadro de salida para ver los resultados; en pantallas más pequeñas ni siquiera lo vería. http://jsfiddle.net/Rqx8T/
Aumentar el ancho con CSS
Puedes usar CSS para aumentar el ancho de tu ventana emergente, así:
/* The max width is dependant on the container (more info below) */
.popover{
max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
Si esto no funciona, probablemente desees la solución siguiente y modificar tu containerelemento. ( Ver el JSFiddle )
Contenedor de arranque de Twitter
Si eso no funciona, probablemente necesites especificar el contenedor:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
Más información
El popover está contenido dentro del elemento en el que se activa. Para extenderlo "ancho completo", especifique el contenedor:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
JSFiddle
Vea JSFiddle para probarlo.
JSFiddle: http://jsfiddle.net/xp1369g4/
Yo tuve el mismo problema. Pasé bastante tiempo buscando una respuesta y encontré mi propia solución: agregue el siguiente texto al encabezado:
<style type="text/css">
.popover{
max-width:600px;
}
</style>
También necesitaba una ventana emergente más amplia para un campo de texto de búsqueda. Se me ocurrió esta solución Javascript (aquí en Coffee ):
$(".product-search-trigger")
.click(-> false) # cancel click on <a> tag
.popover
container: "body"
html: true
placement: "left"
title: "<strong>Product search</strong> enter number or name"
.on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))
La solución está en la última línea. Antes de que se muestre la ventana emergente, la opción de ancho máximo se establece en un valor personalizado. También puedes agregar una clase personalizada al elemento tip.
