Modello Twitter Bootstrap 3 con larghezza 100%

134

Sono un principiante bootstrap e ho un modello largo al 100% che voglio codificare con bootstrap. La prima colonna inizia nell'angolo sinistro e ho una mappa di Google che si estende all'estrema destra. Pensavo di poterlo fare con container-fluidclasse, ma non sembra più disponibile. Non ho idea di come ottenere quel layout con bootstrap 3. Sto usando il modello Geometry PSD di themeforest, il link qui se vuoi vedere il layout: http://themeforest.net/item/geometry-design-for- geolocalizzazione-sociale-networkr / 4752268

— Samia Ruponti
fonte

5

Puoi personalizzare Bootstrap per utilizzare le @container-*larghezze al 100%. Inoltre, .container-fluidsta tornando in 3.1.0. :)

247

Per Bootstrap 3, è necessario utilizzare un wrapper personalizzato e impostarne la larghezza al 100%.

.container-full {
  margin: 0 auto;
  width: 100%;
}

Ecco un esempio funzionante su Bootply

Se si preferisce non aggiungere una classe personalizzata, è possibile ottenere un layout molto ampio (non 100%) avvolgendo tutto all'interno di una col-lg-12( demo di layout ampio )

Aggiornamento per Bootstrap 3.1

La container-fluidclasse è tornata in Bootstrap 3.1, quindi può essere utilizzata per creare un layout a larghezza intera (non sono richiesti CSS aggiuntivi).

Demo Bootstrap 3.1

— Zim
fonte

13

Devi stare attento. La riga ha un margine di -15 px a sinistra e a destra. Ciò è compensato dal contenitore che ha un'imbottitura di 15px. Il modo migliore è aggiungere quell'imbottitura al contenitore pieno e quindi utilizzare righe e colonne per creare la griglia.

— rootman,

6

@rootman Sto usando class = "container container-full" e sembra funzionare.

— Kenmore,

Usa il contenitore-fluido insieme a un col-md-12 per ottenere una riga a dimensione intera. Ci sarà una grondaia (15px standard su ciascun lato) che deve essere rimossa. Il modo più semplice è rimuoverlo manualmente, usando i seguenti css personalizzati: #SomeId div {padding-left: 0; padding-right: 0; }

— Martin,

2

Grazie per la punta ... il contenitore-fluido ha funzionato bene per me, non sono necessarie altre modifiche. La grondaia non presentava un problema perché l'impostazione del colore di sfondo della classe contenuta rendeva il colore ai bordi, come desiderato, mentre il testo e altri elementi erano leggermente sfalsati, anche come desiderato.

— Krishna Gupta,

30

Questa è la struttura di base completa per il layout con larghezza del 100% in Bootstrap v3.0.0 . Si consiglia di non avvolgere il vostro <div class="row">con containerclasse. Perché la containerclasse richiederà molto margine e questo non fornirà un layout a schermo intero (larghezza 100%) in cui bootstrap ha rimosso la classe fluid-container dalla loro versione mobile-first v3.0.0.

Quindi inizia a scrivere <div class="row">senza classe contenitore e sei pronto per iniziare con un layout con larghezza del 100%.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Per vedere il risultato da solo ho creato un bootply. Guarda l'output live lì. http://bootply.com/82136 E il layout di base completo bootstrap 3 con una larghezza del 100% ho creato un'idea. puoi usarlo. Prendi l'essenza da qui

Rispondimi se hai bisogno di ulteriore assistenza. Grazie.

— Shaharia Azam
fonte

20

Questa soluzione aggiunge una barra di scorrimento orizzontale in FF a causa del margine su .row. I documenti bootstrap dicono che .row dovrebbe sempre essere usato all'interno di un contenitore per questo motivo - Le persone che cercano di creare layout completamente fluidi (il che significa che il tuo sito estende l'intera larghezza del viewport) devono avvolgere il contenuto della griglia in un elemento contenente con riempimento: 0 15px; per compensare il margine: 0 -15px; usato su .rows. - getbootstrap.com/css/#grid-intro

— nealio82

5

Nealio ha ragione. Dovresti comunque usare un contenitore. Avvolgo le mie righe a larghezza intera in un .container-full con questa dichiarazione CSS:.container-full { padding: 0 15px; }

— tbeseda

3

Questo sembra essere un bug nel bootstrap. Ho risolto aggiungendo quanto segue all'elemento contenitore in cui sono posizionate le righe a schermo intero: riempimento: 0 15px; margine-sinistra: 0px; margine-destra: 0px;

— Jorre,

2

Non tutti .rowdevono essere contenuti all'interno di un .container?

— skube,

2

Erik Flowers ha scritto un ottimo articolo sul rapporto contenitore / riga, consiglio di leggerlo!

— idleberg,

27

Usando Bootstrap 3.3.5 e .container-fluid, è così che ottengo tutta la larghezza senza grondaie o scorrimento orizzontale sul cellulare. Si noti che è .container-fluidstato reintrodotto in 3.1.

Larghezza totale su cellulare / tablet, 1/4 schermo sul desktop

<div class="container-fluid"> <!-- Adds 15px left/right padding --> 
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
      <!-- Full-width for mobile -->
      <!-- 1/4 screen width for desktop -->
    </div>
  </div>
</div>

Larghezza completa su tutte le risoluzioni (cellulare, tabella, desktop)

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>

— angularsen
fonte

20

Hai ragione usando div.container-fluide hai anche bisogno di un div.rowbambino. Quindi, il contenuto deve essere inserito all'interno senza colonne della griglia. Se dai un'occhiata ai documenti puoi trovare questo testo:

Le file devono essere posizionate all'interno di un contenitore .container (larghezza fissa) o .container (larghezza intera) per un corretto allineamento e riempimento.

Utilizzare le righe per creare gruppi orizzontali di colonne.

Non usando le colonne della griglia va bene come indicato qui:

Il contenuto deve essere posizionato all'interno delle colonne e solo le colonne possono essere figlie immediate delle righe.

E guardando questo esempio, puoi leggere questo testo:

Larghezza intera, colonna singola : per gli elementi a larghezza intera non sono necessarie classi di griglia.

Ecco un esempio dal vivo che mostra alcuni elementi usando il layout corretto. In questo modo non hai bisogno di CSS o hack personalizzati.

— gerardnll
fonte

5

In BOOTSTRAP 4 è possibile utilizzare

<div class="row m-0">
my fullwidth div
</div>

... se usi semplicemente un .row senza .m-0 come div di livello superiore, avrai un margine indesiderato, che rende la pagina più larga della finestra del browser e causa una barra di scorrimento orizzontale.

— Felix
fonte