problem with a container leaves in horizontal

Asked

Viewed 43 times

1

I am trying to let this 3 box + box horizontal inserir a descrição da imagem aqui

I used mr-auto to leave the Carousel on the right and ml-auto in the box to stay left and tried to use a d-inline-block, but it wasn’t... ( I’m using bootstrap)

<div  class="container">
<div id="caroulstt" class="carousel slide carousel-fade mt-4 h-auto w-50 mr-auto" data-ride="carousel">

    <ol class="carousel-indicators">
        <li data-target="#caroulstt" data-slide-to="0" class="active"></li>
        <li data-target="#caroulstt" data-slide-to="1"></li>
        <li data-target="#caroulstt" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/sd1.png" class="img-fluid d-block">
        </div>
        <div class="carousel-item">
            <img src="images/sd2.png" class="img-fluid d-block">
        </div>
        <div class="carousel-item">
            <img src="images/sd1.png" class="img-fluid d-block">
        </div>
    </div>
</div>
    <div class="boxone ml-auto"></div>

    <div class="boxone ml-auto mt-3"></div>
</div>
html

  • Felipe by chance you are using Bootstrap 4?

  • I am the 4.1.3 .

1 answer

1


To work properly you have to use the Bootstrap Grid... It is not enough that you put the content on the page without determining a "position" for that content within the Grid. Here you can see the Bootstrap Grid documentation https://getbootstrap.com/docs/4.0/layout/grid/

It would be nice to take a look at the official documentation of the Bootstrap Carousel, because I know had some divergences from what is suggested by the documentation: https://getbootstrap.com/docs/4.0/components/carousel/

See the example how it looks, slider occupying col-10 and direct content col-2, you can go booing this, for example with col-6 on the merry-go-round and col-6 in the contents one of them gets 50% of the width of the screen:

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


  
  <div  class="container">
<div class="row">
  <div class="col-10">

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="https://placecage.com/800/300" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://placecage.com/800/300" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://placecage.com/800/300" alt="Third slide">
        </div>
      </div>
      
    </div>

  </div>
      <div class="col-2">
        <div class="boxone ml-auto">teste 1</div>
    
        <div class="boxone ml-auto mt-3">teste 2</div>
      </div>
</div>
</div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  • in the case inside a container it has how many col? 12? And about increasing the height of the img I increase in that part? src="https://placecage.com/800/300" ? because I tried using h- and it won’t ;x

  • i’m not getting by the exact dimensions of the img I put on the slide already tried by w - by h- and nothing.

  • @Felipe yes the grid has 12 parts, and you can divide according to your layout, since always disappear 12 parts. Type col-8 pro slider and col-4 pro content, or col-9 pro slider and col-3 pro content and so you arrive at something that suits you... About the images inside the slider you have to use the documentation code. Note that in my example the image fills 100% of the slider width always, but the images have different heights. The ideal is that all images have the same height/width ratio and not one of each size... If you have any more questions tell me here that I try to help you.

  • this part of the grid I managed to give an understanding mano, and on the image I put all in the same size 570 - 500, but when it is in the w-100 its height goes to 650 and the length tb I do not know why.

  • @Felipe this happens pq the height of the image is automatic height:auto this causes the height of the image to follow the width, thus preventing a wider image than high to be "flattened" to fit all inside the slider.see this image https://reaction.ca/wp-content/uploads/IG-HorizontalExamples.jpg

  • I understood and I would have a way of slowing this down?

  • in case I would have to change the class Heigh?

  • @Felipe this answer here will help you https://answall.com/questions/281416/modifir-configure%C3%A7%C3%A3o-de-carrosel-em-bootstrap-4/281524#281524 there shows how to control the slider height

  • opa man vlw worked, and on the col’s you know how many fit within 1 a container class?

  • @Felipe the Bootstrap Grid has a rules, you can’t have one container inside another. The first child of a Container must be a Row, and Inside the Row you put souas col-. You can have a Row inside a Col- peacefully. In this answer you can see that there is a nesting of the Row Col Row Col. Note the construction of the grid etc https://answall.com/questions/328689/imagem-n%C3%A3o-flutua-com-bootstrap-4/328780#328780

  • I understood bro, and I could increase the width of a container? by q saw it has 1110 I wanted to increase the width I tried using . container{width:1180px;} and was not.

  • Face it will depend a lot on your code etc... but you can change all class container for container-fluid and see if it stays the way you want. If you continue with problems opens a new question there and puts your doubt I give you a force to solve.

  • if you can give an https://answall.com/questions/333448/problema-com-grid-bootstrap

Show 8 more comments

Browser other questions tagged html

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