Dev Faq
0
votes

La largeur complète Bootstrap HTML / CSS ne fonctionne pas

        <div id="container">
            <div class="table-responsive bordered fill">

                    <div class="row fill-row">
                            <div class="w-50" id="image_1"></div>                      
                            <div class="w-50" id="image_1"></div>
                    </div>

                    <div class="row fill-row">
                            <div class="w-50" id="image_1"></div>                            
                            <div class="w-50" id="image_1"></div>
                    </div>

            </div>
        </div>
https://jsfiddle.net/4b36yozr/
How I can remove the white vertical bar at the right of container despite it's set to be full width. I need to have 4 blocks that cover all the screen without that white space at right.
2 commentaires

Ajouter marge: 0 à votre classe de ligne. Bootstrap lui donne une marge de 15 px de chaque côté.

Il est causé par la classe .row. spécifiquement margin-gauche: -15px; remplacer cela et cela résoudra votre problème

4 Réponses :

0
votes

Retirez le style de marge de la rangée de classe / remplissage.

0 commentaires
1
votes

Donner la marge comme 0px sur la classe remplissage code> et vous l'obtenez sans espace au coin droit.

p> 

<!DOCTYPE html>
<html>

<head>
  <title>Efficienza Energia S.p.a.</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    #container {
      width: 100%;
      height: 100%;
      min-height: 100%;
      min-width: 100%;
      display: block;

    }

    html,
    body {
      height: 100%;
      width: 100%;
    }

    .fill {
      min-height: 100%;
      max-width: 100%;
      height: 100%;
      width: 100%;
    }

    .fill-row {
      min-height: 50%;
      max-width: 100%;
      height: 50%;
      width: 100%;
      /*margin-here*/
      margin:0px;
    }

    #image_1 {
      background-image: url("https://www.crockerriverside.org/sites/main/files/imagecache/pod/main-images/camera_lense_0.jpeg");
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: auto;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="table-responsive bordered fill">

      <div class="row fill-row">
        <div class="w-50" id="image_1">
        </div>
        <div class="w-50" id="image_1">
        </div>
      </div>

      <div class="row fill-row">
        <div class="w-50" id="image_1">
        </div>
        <div class="w-50" id="image_1">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

0 commentaires
0
votes

Ajout du style ci-dessous doit retirer l'espace blanc sur la droite xxx pré>

Qu'est-ce qui semble se produire était que la classe .row ajoutait les styles suivants: P> 

margin-right: -15px;
margin-left: -15px;

0 commentaires
0
votes

Il suffit d'utiliser fluide-conteneur et retirez le remplissage des colonnes, et n'oubliez pas non plus de définir hauteur et largeur sur 100vh < / code> et 100% , respectivement. Comme: xxx

et le CSS: xxx

laissez-moi savoir si cela a aidé. J'ai testé ici et ça marche bien.

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor