problema con css bootstrap3

smartwork

Utente Attivo
15 Apr 2018
36
0
6
salve, vorrei sapere come mai la pagina occupa piu spazio dello schermo, come mai mi fa vedere la barra sotto x spostarsi orizontalmente?, se ho asegnato 4 colonne x fila
HTML:
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="row">
      <div class="col-sm-4">
        <p>AAAAAAAA AAAAAA AAAA A</p>

      </div>
      <div class="col-sm-4">
        <p>AAAAAAAAA AAA AAAAA AAAA A AAAAAAA AAAAAAAAAAA A AAAAAA AAA AAAAAAAAA</p>
      </div>
      <div class="col-sm-4">
        <p>AAAAAA AAA AAAAA AAAA A AAAAAAA AAAAA AAAAAA AAA AAAAAAAAA
        </p>
      </div>

    </div>
    <div class="row">
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>

    </div>
    <div class="row">
      <div class="col-sm-3"></div>
      <div class="col-sm-3"></div>
      <div class="col-sm-3"></div>
      <div class="col-sm-3"></div>


    </div>

  </body>
</html>
ice_screenshot_20200613-181842.png
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.389
338
83
  1. Spiegati meglio le parole qui non costano niente!
  2. Non scrivere abbreviato come gli SMS in caratteriri sono a gratis!

Sei tenuto a leggere attentamente il regolamento
 

MarcoGrazia

Utente Attivo
15 Dic 2009
793
16
18
59
Udine
www.stilisticamente.com
Non devi usare le X per scrivere per ad esempio.
Per il resto non è ho idea, forse si riferisce a tutte quelle AAAAA sotto il tuo messaggio, non si capisce al volo che ga parte dello screen shot.

Comunque, venendo al tuo problema, manca la DOCTYPE all'inizio del file e non hai definito un contenitore nella pagina.
Come ti ho indicato con i commenti.
HTML:
<!DOCTYPE html> <!-- <----- -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
      <div class="container"> <!-- <--- -->
        <div class="row">
            <div class="col-sm-4">
                <p>AAAAAAAA AAAAAA AAAA A</p>
            </div>
            <div class="col-sm-4">
                <p>AAAAAAAAA AAA AAAAA AAAA A AAAAAAA AAAAAAAAAAA A AAAAAA AAA AAAAAAAAA</p>
            </div>
            <div class="col-sm-4">
                <p>AAAAAA AAA AAAAA AAAA A AAAAAAA AAAAA AAAAAA AAA AAAAAAAAA</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-4"></div>
            <div class="col-sm-4"></div>
        </div>
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-3"></div>
            <div class="col-sm-3"></div>
            <div class="col-sm-3"></div>
        </div>
    </div>  <!-- <---- -->
  </body>
</html>
Così la tua pagina funziona perfettamente.
 

ninja72

Utente Attivo
15 Giu 2020
24
4
3
Ciao, penso che il problema sia nel fatto che manca una classe container-fluid che racchiuda le classi row.

CSS:
<div class="container-fluid">
    <div class="row">
        testo
    </div>
    <div class="row">
        testo
    </div>
</div>
 
Discussioni simili
Autore Titolo Forum Risposte Data
Emix Problema con creazione form css/mobile HTML e CSS 3
F [Javascript] Problema funzione jquery con elementi css esterni Javascript 1
A [WordPress] Problema CSS con diversi browser WordPress 4
S Problema con Form CSS HTML e CSS 1
berry94mf Problema con include e css PHP 1
V Problema Rollover con css HTML e CSS 1
M problema con media query CSS HTML e CSS 1
D Problema collegamento file css con html HTML e CSS 4
S Problema con il css di un font HTML e CSS 2
A Problema gestione layout con css HTML e CSS 11
F problema con sfondo CSS HTML e CSS 2
C Problema con il CSS per il comando text-align HTML e CSS 10
M css html problema con explorer help HTML e CSS 0
G problema con css PHP 9
B Problema di inserimento "menu con css" in pagina web "con tabelle" HTML e CSS 5
M Problema con css HTML e CSS 3
M problema css con ie8! help HTML e CSS 0
K problema con current css HTML e CSS 0
L problema con menù css HTML e CSS 1
T problema con i css ... explorer visualizza male... HTML e CSS 2
I Problema con i CSS su diversi browser HTML e CSS 3
S Problema con CSS IE 7 e XP HTML e CSS 2
M Problema CSS nei widget con sfondo sfumato HTML e CSS 0
R Problema con i css in standard mode HTML e CSS 3
N [PHP+HTML+CSS] Problema con un div HTML e CSS 6
R problema con il css dei link HTML e CSS 2
S Piccolo problema con i CSS HTML e CSS 2
I Problema CSS con joomla e phpbb [Era: joomla e phpbb] Joomla 2
G Css, problema margine con explorer HTML e CSS 0
F [CSS] Problema con IE e div fixed HTML e CSS 2
R Problema con pop-pu in css HTML e CSS 4
E Problema con CSS con 3 colonne HTML e CSS 5
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
G Problema con Get page PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0

Discussioni simili