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.449
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
852
20
28
62
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
L problema collegamento file css con html HTML e CSS 1
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 4
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
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
N Problema con position absolute e overflow HTML e CSS 4
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
K [PHP] Problema con variabili concatenate. PHP 1
O problema con query PHP 4
I problema con 2 account Posta Elettronica 1
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
M Problema con Try Catch PHP 0
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8

Discussioni simili