problema con css bootstrap3

smartwork · 13 Giu 2020

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>

Max 1 · 13 Giu 2020

Spiegati meglio le parole qui non costano niente!
Non scrivere abbreviato come gli SMS in caratteriri sono a gratis!

Sei tenuto a leggere attentamente il regolamento

smartwork · 14 Giu 2020

Max 1 ha scritto:
Spiegati meglio le parole qui non costano niente!

Non scrivere abbreviato come gli SMS in caratteriri sono a gratis!

Sei tenuto a leggere attentamente il regolamento

scusa ma non capisco cosa non si capisce

MarcoGrazia · 15 Giu 2020

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 · 15 Giu 2020

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>

Cerca

Cerca

problema con css bootstrap3

smartwork

Utente Attivo

Max 1

Super Moderatore

smartwork

Utente Attivo

MarcoGrazia

Utente Attivo

ninja72

Utente Attivo

Discussioni simili