problem with container leaves horizontally

Question

problem with container leaves horizontally

Navigation

#1 by (1 votes)

1

I'm trying to leave this carousel + 3 box horizontally

Iusedmr-autotoleavethecarouselontherightandml-autointheboxtostayleftandtriedtousead-inline-blockbutitwasnot...(I'musingbootstrap)

<divclass="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

asked by anonymous 01.10.2018 / 14:36

1 answer

Error - to create query for method public abstract org.springframework.data.domain.Page pass input when executing bat

score 1 · Accepted Answer

To work right you have to use the Bootstrap Grid ... It is not enough to put the content on the page without determining a "position" for that content inside the Grid. Here you can consult the Bootstrap Grid documentation link

It would be nice to take a look at the official Bootstrap Carrot documentation, as I knew there were some disagreements with what is suggested by the documentation: link

Look at the example as follows, slider occupying col-10 and content to direct col-2 , you can go vairando this, for example with col-6 in carrocel and col-6 in content cado 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><scriptsrc="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>