Bootstrap largeur minimale grille

En utilisant twitter bootstrap à l'aide d'un fluide de la ligne de l'installation j'ai

<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

Ce que je veux, c'est de donner la première div (avec classe span4) une largeur minimale de 275px sans perturber la mise en page de la seconde. J'ai essayé tout à l'ajout de min-width: 275px mais que fait le deuxième div passer à la ligne suivante. Est-il un moyen pour faire cela correctement?

source d'informationauteur Akshat

  1. 9
    <div class="row-fluid">
    <div class="span4" style="min-width: 275px">...</div>
    <div class="span8">...</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

    A fonctionné pour moi. Il se déplace de la deuxième div pour la nouvelle ligne uniquement si la deuxième div a moins de ~66% de l'espace à l'écran.

    http://jsfiddle.net/daniilr/DAw6p/embedded/result/ (obtenir le code)

  2. 1

    J'ai même problème, trop. Et j'essaie de résoudre ce problème avec css et bootstrap. Mais je ne peux pas trouver une solution. Donc, j'ai résolu ce problème avec jQuery.

    Ma Situation

    <div id="text" class="col-sm-3 col-sm-offset-2" style="min-width: 320px"></div>
<div id="image" class="col-sm-7" ></div>

    Lorsque la largeur de la fenêtre est étroite, alors #image va passer à la prochaine ligne. Parce que #text largeur ne peut pas être relâché plus de 320px. Donc #image ne peut pas occuper sa largeur, et d'avoir à se déplacer à côté de la ligne.

    Comment Je L'Ai Résolu

    Calculer #image largeur de chaque taille de fenêtre. Et le CSS n'est pas bon pour ce travail. Donc je doit utiliser jQuery.

    $(window).ready(function() {
    resizeImageWidth();
});

$(document).ready(function() {
    $(window).resize(function() {
        resizeImageWidth();
    });
});

var resizeImageWidth = function() {
    var text_minwidth = parseInt($('#text').css('width'));
    var text_marginLeft = parseInt($('#text').css('margin-left'));
    var image_marginLeft = parseInt($('#image').css('margin-left'));

    if ($(window).width() > 768) {
        var image_width = $(window).width() - (text_marginLeft + text_minwidth + image_marginLeft + 32);
        $('#image').width(image_width);
        console.log(image_width);
    } else {
        $('#image').width('');
    }
}

    resizeImageWidth fonction sera d'obtenir #text largeur de la marge de gauche, #image de marge à gauche et à plus de chose. Bien sûr, il ne peut pas s'insérer votre code. Je dois soustraire ces choses. Veuillez vérifier ce que j'ai soustrait.

    Après un rendu div pouvez toujours passer à la prochaine ligne. Peut-être que certains éléments est manquant. J'ai donc soustraire 30px à peine. Mais ce calcul ont encore des erreurs. Donc div pouvez déplacer la ligne suivante dans certains window largeur. Je devrais donc de soustraire une plus 2px pour l'en empêcher. Idéalement, je devrais faire plus de calculs exacts.

    Dans le petit écran, ce calcul n'est pas nécessaire. Donc if ($(window).width() > 768) est nécessaire. Et cette fonction doit charger dans $(window).ready. Si vous chargez dans $(document).readypuis propriété CSS n'est pas incomplet. Pour le calcul de l'erreur est plus grande.

  3. -1

    Bootstrap colonnes sont flex éléments. Vous devez décider sur une colonne qui devrait se rétrécir quand les autres ont atteint leur min-width. Cela empêche les éléments de passer à la ligne suivante.

    voici une jolie codepen j'ai fait: https://codepen.io/timar/pen/VQWmQq/

    Dans ce cas, nous prenons l'autre travée, de le réduire à span1. Donner flex-grow et nous avons pour remplacer amorce max-width de la propriété.

    <div class="row-fluid">
    <div class="span4 style="min-width: 275px;">...</div>
    <div class="span1 style=" flex-grow: 1; max-width:100%; "">...</div>
</div>

    pour être sur le côté sûr, vous pouvez réduire le deuxième span uniquement la quantité nécessaire. j'.e span6 . Ajuster le max-width pour le montant la durée normale avons eu span8 100/12*8 = 66.66%