Probleem met 4 kolomen in bootstrap

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Johannes davidian

johannes davidian

21/10/2020 18:00:23
Quote Anchor link
Hallo,
Ik weet niet of ik deze vraag hier kan vragen maar ik ga toch proberen.
ik heb 4 kolomen gemaakt met bootstrap 4 maar ik wil deze kolomen bepaalde afstand van elkaar hebben met margin.
maar dan de laatste (4 de) kolom gaat naar de volgende line.
Ik heb geprobeerd deze probleem op te lossen maar zonder resultaat.
mij url is :http://webdesignleren.com/
mij html code is:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<div class="row ">
<div class="home-content3-image1 col-sm-12 col-md-6 col-lg-3 "></div>
<div class="home-content3-image2 col-sm-12 col-md-6 col-lg-3 "></div>
<div class="home-content3-image3 col-sm-12 col-md-6 col-lg-3 "></div>
<div class="home-content3-image4 col-sm-12 col-md-6 col-lg-3 "></div>
</div>


[/Code]
dank u wel
johannes
Gewijzigd op 21/10/2020 18:05:36 door - Ariën -
 
PHP hulp

PHP hulp

27/11/2020 10:00:46
 
- Ariën -
Beheerder

- Ariën -

21/10/2020 18:04:39
Quote Anchor link
Hoe pas je die margin toe?
 
Johannes davidian

johannes davidian

21/10/2020 18:20:30
Quote Anchor link
- Ariën - op 21/10/2020 18:04:39:
Hoe pas je die margin toe?




Toevoeging op 21/10/2020 18:42:55:

ik heb geprobeerd ml-1 toe te voegen in

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div class="home-content3-image1 col-sm-12 col-md-6 col-lg-3 ml-1 "></div>

alle informatie over ml-1 staat op bootstrap website :https://getbootstrap.com/docs/4.4/utilities/spacing/
maar toch de laatse kolom gaat naar de volgende lijn.
johannes
Gewijzigd op 21/10/2020 18:53:19 door - Ariën -
 
- Ariën -
Beheerder

- Ariën -

21/10/2020 19:15:48
Quote Anchor link
Waar is je DOCTYPE?
 
Johannes davidian

johannes davidian

22/10/2020 12:24:16
Quote Anchor link
het ontbrak in header.php maar ik heb gecorrigeerd.
deze is de code in header.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package john
 */


?>

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">

    
    <?php wp_head(); ?>
</head>

de probleem blijft hetzelfde.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="row ">
<div class="home-content3-image1 col-sm-12 col-md-6 col-lg-3 ml-3"></div>
<div class="home-content3-image2 col-sm-12 col-md-6 col-lg-3 ml-3"></div>
<div class="home-content3-image3 col-sm-12 col-md-6 col-lg-3 ml-3 "></div>
<div class="home-content3-image4 col-sm-12 col-md-6 col-lg-3 ml-3 "></div>
</div>

[size=xsmall][i]Toevoeging op 22/10/2020 12:24:17:[/i][/size]

het ontbrak in header.php  maar ik heb gecorrigeerd.
deze is de code in header.php

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package john
 */


?>

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">

    
    <?php wp_head(); ?>
</head>

de probleem blijft hetzelfde.


<div class="row ">
<div class="home-content3-image1 col-sm-12 col-md-6 col-lg-3 ml-3"></div>
<div class="home-content3-image2 col-sm-12 col-md-6 col-lg-3 ml-3"></div>
<div class="home-content3-image3 col-sm-12 col-md-6 col-lg-3 ml-3 "></div>
<div class="home-content3-image4 col-sm-12 col-md-6 col-lg-3 ml-3 "></div>
</div>
 
- Ariën -
Beheerder

- Ariën -

22/10/2020 13:03:03
Quote Anchor link
heb je het element al geinspecteerdin de browser? Misschien zit er een CSS-stijl in de weg?
 
Johannes davidian

johannes davidian

22/10/2020 20:37:49
Quote Anchor link
bedankt voor alle informatie.
deze is de juiste code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="row ">
  <div class="col-sm-12 col-md-6 col-lg-3">
    <div class="home-content3-image1 w-100"></div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-3">
    <div class="home-content3-image2 w-100"></div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-3">
    <div class="home-content3-image3 w-100"></div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-3">
    <div class="home-content3-image1 w-100"></div>
  </div>
</div>

mij url is:http://webdesignleren.com/
johannes
 
- Ariën -
Beheerder

- Ariën -

22/10/2020 20:42:03
Quote Anchor link
Met een wrapper-divje werkt het inderdaad beter.
 
Johannes davidian

johannes davidian

23/10/2020 13:15:28
Quote Anchor link
dank u wel
johannes

Toevoeging op 23/10/2020 13:15:32:

dank u wel
johannes
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.