Carousel Broken Bootstrap

Asked

Viewed 258 times

1

Good afternoon, I’m having trouble with carousel bootstrap, angular design 7.

When adding:

*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

in the style sheet. The carousel slide works, passes the imgs, but when passing, the scroll bar goes up or down and under the carousel moves a background along with img . Taking out css above the style sheet, works normally. I need to use c because the project is already in progress based on the same .

Remainder of the code :

body {
  font-family: $fonts;
  background-color: #dfdfdf;
  position: relative;
  color: $font_color;
  text-align: center;
  margin: 0;
  padding: 0;
  a,
  a:visited {
    color: $link_color;
    text-decoration: none;
  }
  a:hover {
    color: $link_hover_color;
  }
}
.div {
  margin: 0;
  padding: 0;
}

html
carousel bootstrap standard

angular twitter-bootstrap carousel owl-carousel
  • 1

    I couldn’t reproduce the problem. Can you create a fiddle with the problem happening?

  • 1

    If you still continue with the error post the problem in codepen or jsfiddeli so that we can simulate the problem, because only with what was presented in the question this difficult propose another solution

  • 1

    https://codepen.io/gring0/pen/byNgqG ready obg for attention. only with top bar with 2 imgs one left and one right . Carousel that is breaking.

  • 1

    Face not breaking anything looks here the normal Slider, running on Bootstrap 4, https://jsfiddle.net/taL1pskx/ something else, because the walk of your image has the text "Slide" at the end? It seems wrong to me src="https://via.placeholder.com/600x300?auto=yes&text=Segundo Slide"

  • 1

    as already commented with , :before, *:after { box-Sizing: border-box; padding: 0; margin: 0; } does not run. puts <br> a space looks underneath the Carousel and looks at the scroll bar will see that this broken , it moves ... vlw

1 answer

2


There is a way to revert this CSS only to the children of a particular Container. So, in this case, you put the Carousel inside a section and determines that everything within this service will have other values... initial values...

Like you have a universal dial * that you do not want to focus on the Carousel you put section * { outras propriedades } and the Carousel inside that section.

section * {
    box-sizing: initial;
    padding: initial;
    margin: initial;
}

Take this example, I have a div with class .box and in it the CSS of * directly, already on the same div within a Section I reverted the properties to the initial values.

inserir a descrição da imagem aqui

Follow the image code above

body {
    display: flex;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 10px solid #000;
}
section * {
    box-sizing: initial;
    padding: initial;
    margin: initial;
}
section {
    border: 1px solid #0f0;
}
    
<div class="box"></div>
<section>
    <div class="box"></div>
    box dentro da section
</section>

Browser other questions tagged angular twitter-bootstrap carousel owl-carousel

You are not signed in. Login or sign up in order to post.