Je suis nouveau dans le bootstrap. Je mets 3 images côte à côte mais elles ne sont pas adjacentes. Il y a une marge entre eux. Ceci est une image

Je veux éliminer les marges pour que les images soient adjacentes. La taille de l'image centrale est de 1200x400 et la taille des images gauche et droite est de 600x400. Et aussi j'ai utilisé la classe img-responsive. quel est le problème réel? Voici le code

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />
        </div>
        <div class="col-sm-6">
            <asp:Image CssClass="img-responsive" ImageUrl="images/center1.jpg" runat="server" />
        </div>
        <div class="col-sm-3">
            <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />    
        </div>
    </div>
</div>

Vous remarquez également sur l'image, ces images ne sont pas correctement alignées verticalement comment le réparer.

Merci!

1
user8951186 16 nov. 2017 à 14:52

6 réponses

Meilleure réponse

Comme Yorki Bonilla l'a dit, vous pouvez faire quelque chose comme ceci:

<div class="container">
<div class="row no-marginLR">
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />
    </div>
    <div class="col-sm-6 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/center1.jpg" runat="server" />
    </div>
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />    
    </div>
</div>

Et ajoutez une classe dans votre CSS

.no-padding {
    padding: 0px;
}

Mais en même temps, vous devez vous rappeler de supprimer les marges gauche et droite de la ligne qui contient vos colonnes en faisant:

.no-marginLR {
    margin-left:0;
    margin-right:0;
}

Notez que j'ai ajouté la classe .no-marginLR à la ligne

-1
Andy 16 nov. 2017 à 13:51

Avec Bootstrap v4, vous pouvez utiliser:

<div class="row no-gutters"></div> 

Cela définira la marge gauche et la marge droite à 0

Classe Bootstrap:

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}   
0
MAS89 11 mars 2020 à 18:03

Dans votre classe css, ajoutez margin: 0 !important; cela supprimera toutes les marges. Si vous souhaitez supprimer uniquement les marges gauche et droite et conserver le haut et le bas, vous devez spécifier margin-left: 0 !important; margin-right: !important;

0
Mohammed Wahed Khan 16 nov. 2017 à 13:11

J'ai mal compris votre question, voici la bonne réponse:

Si vous voulez que les images ressemblent à ceci:

Images corrigées les unes à côté des autres

Au lieu de comme ça:

d'anciennes images en utilisant votre code par exemple

Vous devez supprimer le remplissage du Col-sm que bootstrap a.

Comment?

Ce n'est pas une bonne pratique de supprimer le remplissage de toute la classe col-sm .. donc je préfère créer une classe pour ce cas particulier nommée (je ne sais pas) "no-padding". et faites ceci:

<div class="container">
<div class="row">
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />
    </div>
    <div class="col-sm-6 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/center1.jpg" runat="server" />
    </div>
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />    
    </div>
</div>

Et maintenant dans votre CSS:

no-padding {
padding: 0px;
}

Cela devrait empêcher les images d'avoir des espaces entre elles.

0
Yorki Bonilla 16 nov. 2017 à 12:54

C'est du code css

body {
    background-color: #D8BFD8;
}

.navbar-default {
  background-color: #4c1f36;
  border-color: #63304a;
}
.navbar-default .navbar-brand {
  color: #eeeeee;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #dddddd;
}
.navbar-default .navbar-text {
  color: #eeeeee;
}
.navbar-default .navbar-nav > li > a {
  color: #eeeeee;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #4c1f36;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #eeeeee;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
  background-color: #63304a;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-toggle {
  border-color: #63304a;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #63304a;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #eeeeee;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #eeeeee;
}
.navbar-default .navbar-link {
  color: #eeeeee;
}
.navbar-default .navbar-link:hover {
  color: #dddddd;
}

@media (max-width: 768px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #eeeeee;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #dddddd;
    background-color: #63304a;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #dddddd;
    background-color: #63304a;
  }
}

@media (min-width: 768px) {

    .horizontal-menu {
        width: 700px;
        float: left;
        opacity: 0.95;    
    }

    .left {
        float: left;
        padding: 10px;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

.row-with-full-width {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
0
user8951186user8951186 16 nov. 2017 à 12:05

<row class='no-gutters'>...</row>

Je réalise que vous avez tagué votre question avec la version 3, cependant, Bootstrap 4 inclut une classe de no-gutters pour les grilles. Élimine le remplissage des colonnes que vous voyez. que vous voyez (ainsi que la marge négative sur la ligne).

https://v4-alpha.getbootstrap.com/layout/grid/#no-gutters

A titre d'exemple, 1 conteneur avec une ligne standard. Et le même conteneur avec une ligne avec la classe no-gutters.

Il convient de mentionner que lorsque vous travaillez dans un cadre (Bootstrap, Foundation, etc.) et que vous avez besoin de quelque chose de simple comme celui-ci, consultez la documentation. Très probablement, cela a été pensé et intégré. Oh et fuyez quiconque vous dit de mettre des règles !important dans votre CSS.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-sm-3">
           <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
    </div>
</div>

<div class="container">
    <div class="row no-gutters">
        <div class="col-sm-3">
           <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
    </div>
</div>
1
Robert Wade 16 nov. 2017 à 13:34
47328990