Bootstrap 3 réactive mobiles et de bureau de mise en page

En utilisant bootstrap 3 pour la conception de mon site web réactif, je vais avoir de la difficulté à obtenir la présentation de travailler en dessous d'un bureau de la largeur de la résolution de 1366px v 786px. Lors de la mise en page est en baisse de 1024px, il est considéré comme le mobile de point d'arrêt.

Comment puis-je contrôler lors de la mise en page de commutation de bureau pour mobile de mise en page?Bootstrap 3 réactive mobiles et de bureau de mise en page
Bootstrap 3 réactive mobiles et de bureau de mise en page

c'est mon html

<body>
<div class="container-fluid">

    <div class="container-fluid header">
        <div id="container">        
        </div>
    </div>

    <div class="row-fluid">

        <div class="col-lg-3">
            <div class="well">

            </div>
        </div>

        <div class="col-lg-9">

            <div class="col-lg-6">
                <div class="title">
                    <h3>title 1</h3>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="title">
                    <h3>title 2</h3>
                </div>
            </div>

        </div>
    </div>
</div>

Peut-être êtes-vous parler des media queries?

OriginalL'auteur Mohamed Nagy | 2013-08-02

  1. 9

    La row-fluid et container-fluid sont dépréciées de BS 3, alors maintenant, il vous suffit d'utiliser container et row

    Vous pouvez utiliser les nouvelles "petites" classes de grille (col-sm-*) pour empêcher la mise en page à partir de l'empilement sur le petit écran..

    <div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-3">
            <div class="well">

            </div>
        </div>
        <div class="col-lg-9 col-sm-9">

            <div class="col-lg-6 col-sm-6">
                <div class="well">

            </div>
            </div>

            <div class="col-lg-6 col-sm-6">
                <div class="well">

                 </div>
            </div>

        </div>
    </div>
</div>

    Démo: http://bootply.com/71450

    Si vous le souhaitez, jamais de la pile, même sur les plus petites s'affiche, utilisez le petit col-xs-* classes de grille.

    Génial! La seule chose, vous suggérez "col-" pour les petites colonnes qui ne se cumulent pas, mais je pense que ce que tu veux dire est, "col-xs-"
    Oui, xs il est.. j'ai mis à jour ma réponse. Merci.

    OriginalL'auteur Zim

  2. 3

    À la recherche par le biais de leur documentation concernant le système de grille (http://getbootstrap.com/css/), il semble qu'ils ont des points de rupture au <768, 768-992, 992-1200 et >1200 pixels, de sorte que vous êtes maintenant de tomber dans le " moyen de dispositifs de la catégorie.

    Vous pouvez modifier le fichier de bootstrap.fichier css pour modifier les points de rupture pour votre cas particulier. 

    @media (min-width: 992px) {

    sur les lignes 1002 et 4595.

    OriginalL'auteur beercodebeer

  3. 1

    En vous principal.css (ou tout autre nom que vous avez placé), faire quelque chose comme le code ci-dessous:

    @media(max-width:1024px) {
  body {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  #heading > .container {
    padding: 0 15px;
  }

  #main-content > .container {
    padding: 0 15px;
  }

  #footer > .container {
    padding: 0 15px;
  }
  #heading h1 {
    font-size: 50px;
    line-height: 55px;
  }
  #heading h4 {
    font-size: 20px;
    line-height: 25px;
  }
}

    OriginalL'auteur BrOSs