Probleem met 4 kolomen in bootstrap
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)
1
2
3
4
5
6
7
8
9
10
11
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
<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 -
- 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)
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 -
deze is de code in header.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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>
/**
* 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)
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
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>
<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>
deze is de juiste code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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>
<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
johannes
Toevoeging op 23/10/2020 13:15:32:
dank u wel
johannes