problema con css bootstrap3

smartwork

Utente Attivo
15 Apr 2018
34
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.278
330
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
785
16
18
58
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>