html - español - Comportamiento no receptivo de Bootstrap 3 "btn-group" en pantallas pequeñas

bootstrap tutorial

Question

¿Hay una manera de arranque 3 para manejar tamaños de pantalla pequeños para "btn-group"?

El grupo de botones se coloca en <td> y se envuelve en <div class="btn-group"> :

Se ve bien, hasta que lo cambies de tamaño a <768px. Entonces tiene:

¿Cómo hacerlos persistentes? Traté de agregar la clase btn-group-justified . Pero da como resultado botones de ancho completo y se ve aún peor en el tamaño de la pantalla pequeña.

PD> Tengo una idea, cómo implementarlo agregando un conjunto completo de clases personalizadas. Mi pregunta es acerca de la manera bootstrap3. Puede ser que me haya perdido algo.

Answer 1

Aquí hay una alternativa a la respuesta de @frac que puedes probar que no duplicará el contenido HTML. Acabo de copiar el CSS de btn-vertical-group y btn-group y usé una consulta de medios.

Todo lo que tiene que hacer es agregar btn-toolbar-responsive a las clases de div de la barra de herramientas.

Está en scss por simplicidad aunque puedes convertirlo en línea fácilmente. Aquí está el JS Bin: demo

SCSS:

.btn-toolbar.btn-toolbar-responsive{
  text-align: center;
  margin: 0;
  .btn-group{
    float: none;
  }

  @media (max-width: 767px){
    .btn + .btn,
    .btn + .btn-group,
    .btn-group + .btn,
    .btn-group + .btn-group {
      margin-top: -1px;
      margin-left: 0;
    }


    .btn-group{
      position: relative;
      display: block;
      vertical-align: middle;
      margin: 0;
      .btn {
        display: block;
        float: none;
        max-width: 100%;

      }
      .btn:not(:first-child):not(:last-child) {
        border-radius: 0;
      }
      .btn:first-child:not(:last-child) {
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }
      .btn:last-child:not(:first-child) {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
      }

    }
    .btn-group:not(:first-child):not(:last-child) {
      .btn {
        border-radius: 0;
      }
    }

    .btn-group:first-child:not(:last-child) {
      .btn:last-child, .dropdown-toggle {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    .btn-group:last-child:not(:first-child) {
      .btn:first-child {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
      }
    }
  }

}

Answer 2

De acuerdo, esto funcionó en una página de prueba que hice:

<div class=''btn-group''>
    <button class=''btn btn-default col-xs-6''>View</button>
    <button class=''btn btn-default col-xs-6''>Delete</button>
</div>

Obligar a cada botón a ser del 50% con col-xs-6 evitó que se envolviera en mi propia página de prueba, siguiendo el modelo de tu ejemplo. Sin embargo, si tiene una tabla más amplia que el ejemplo y ajusta hasta 320px, el texto desbordará los botones y se verá incluso peor que su mal ejemplo.

Es posible que ya lo sepas y que no sea práctico para tu situación, por lo que me disculpo si solo presento ejemplos inútiles. Sin embargo, si su tabla es mucho más ancha que la que publicó como ejemplo, le sugiero que haga las filas usando la cuadrícula BS en lugar de una tabla. Lo que esto le permite hacer es hacer que una sola fila se convierta en dos filas cuando la página se encoja, por ejemplo

<div class=''row''>
    <div class=''col-xs-12 col-sm-6''>Some additional details</div>
    <div class=''col-xs-6 col-sm-3''>Date</div>
    <div class=''col-xs-6 col-sm-3''>
        <div class=''btn-group''>
            <button class=''btn btn-default col-xs-6''>View</button>
            <button class=''btn btn-default col-xs-6''>Delete</button>
        </div>
    </div>
</div>

luego, solo encuentre una forma de alternar colores, agregar bordes o lo que sea que necesite para mostrar la separación entre las filas de filas múltiples.

En el BootPly que acabo de hacer, como dije, los botones comienzan a superponerse en tamaños muy pequeños, pero no se envuelven cuando dentro de un <td> en mi navegador se prueban:

http://www.bootply.com/117330

Answer 3

No, si abres la página en una pantalla pequeña, arranca tus botones.

Answer 4

Puede crear dos grupos de botones con los mismos botones y hacer uno de ellos btn-group-vertical . Luego, después de aplicar hidden-xs y visible-xs a ellos, puede ocultar y mostrar el grupo vertical en el tamaño de pantalla apropiado.

<div class="btn-group hidden-xs">
    <button class="btn btn-default">View</button>
    <button class="btn btn-default">Delete</button>
</div>
<div class="btn-group-vertical visible-xs">
    <button class="btn btn-default">View</button>
    <button class="btn btn-default">Delete</button>
</div>

Desafortunadamente, esto requiere repetir el marcado de los botones, pero no debería ser un problema si usa cualquier herramienta de plantillas (defina el marcado una vez e inclúyalo dos veces).

Pantalla ancha

Pantalla estrecha:

Ver el JSFiddle .

Answer 5

Quiero ofrecerte una versión con íconos de FontAwesome . Con una resolución de pantalla mínima, ocultar texto dejando solo iconos.

Lo siento por mi ingles.

<div class="btn-group">
    <button class="btn btn-default" title="View"><i class="fa fa-eye"></i><span class="hidden-xs"> View</span></button>
    <button class="btn btn-default" title="Delete"><i class="fa fa-times"></i><span class="hidden-xs"> Delete</span></button>
</div>  

ACTUALIZACIÓN por Vishal Kumar : agregar vista previa GLYPHICONS

Mira este violín: http://jsfiddle.net/Jeen/w33GD/4/

Answer 6

intenta establecer el ancho mínimo en <td>

<td style="min-width: 90px">
    <div class="btn-group">
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-check"></i>
        </button>
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-question"></i>
        </button>
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-times"></i>
        </button>
    </div>
</td>

Answer 7

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

puede agregar la clase (btn-group-xs, btn-group-sm) en el medio <720px

Espero que te ayude ;)

Answer 8

<div id="secondNav" class="btn-group" role="group">
    <button class=''btn btn-default''>View</button>
    <button class=''btn btn-default''>Delete</button>
</div>

Puedes lograr esto con un jQuery simple

<script>
$(window).resize(function() {
    justifyBtnGroup(''secondNav'');
});

function justifyBtnGroup(id) {
    var btnGroup = $(''#'' + id);
    if($(window).width() > 768) {
        btnGroup.addClass(''btn-group'').removeClass(''btn-group-vertical'');
    } else {
        btnGroup.removeClass(''btn-group'').addClass(''btn-group-vertical'');
    }
}
justifyBtnGroup(''secondNav''); // will run when page loads
</script>