1

inserir a descrição da imagem aqui

<! carousel-->
<div  class="container bg-danger">
<div class="row">
          <div class=".col-4 mt-3 mr-4">
        <div class="boxonee ">teste xd</div>

      </div>
 <div class=".col-4">
 <div id="carouselExampleCaptions" class="carousel slide mt-3 " data-ride="carousel">
                <ol class="carousel-indicators">
                  <li data-target="#carouselExampleCaptions" data-slide-to="0" class=""></li>
                  <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
                  <li data-target="#carouselExampleCaptions" data-slide-to="2" class="active"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                  <div class="carousel-item">
                    <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="" src="images/sd1.png" data-holder-rendered="true"> 
                  </div>
                  <div class="carousel-item">
                    <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="" src="images/sd2.png" data-holder-rendered="true">
                  </div>
                  <div class="carousel-item active">
                    <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="" src="images/sd1.png" data-holder-rendered="true">
                  </div>
               </div> 
              </div>
  </div>
      <div class=".col-4">
        <div class="boxone mt-3 ml-4">teste 1</div>
        <div class="boxone  mt-3 ml-4">teste 2</div>
          <div class="boxone mt-3 ml-4">teste 2</div>
      </div>
</div>
</div>

css:

body {
    margin:0;
    padding:0;
    background:#e84118;
}

img.logo{
    width: 250px;
    height: 70px;
}
.prodf {
    display:flex
}
.form-control-borderless {
    border: none;
}

.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
    border: none;
    outline: none;
    box-shadow: none;
}
.minhaconta{
    margin-top: 10px;
}
.dropspc{
    background: #000;
}
/* actual dropdown animation */
.dropdown .dropdown-menu {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
}

.dropdown.open .dropdown-menu {
    max-height: 400px;
    background: #000;
    width: 200px;
    opacity: 1;
}
.boxone{
    width: 270px;
    height: 150px;
    background: #000;
}
.boxonee{
    width: 270px;
    height: 150px;
    background: #000;
}
/*import*/
.xd .carousel-item {
    overflow: hidden;
    width: 100%;
    height: 100%; /* aqui vc ajusta a altura do slider */
}
.xd .carousel-item img {
    width: 100%;
    /* transform: translateY(-50%)  habilitar se quiser pocicionar o meio da imagem no slider*/
}
/*import*/

estou com esse problema com esses grid estou tentando usar o ml-4 e as box estão descendo.

2
  • Cara se vc está usando algum CSS adicional também coloque na sua resposta para ajudar a te responder.
    – hugocsl
    Commented 1/10/2018 às 15:08
  • adicionei, mas o css não tinha nd de mais
    – Felipe
    Commented 1/10/2018 às 15:11

1 Resposta 1

1

Cara vc está usando o nome da classe da forma errada, não é .col-4, vc não deve usar esse . é apenas col-4

Outro problema é que vc está usando mr-4, isso tb está ajudando o seu grid a se quebrar... substitua por pr-4 (mr = margin-right / pr = padding-right). Vc tem que fazer a parte responsive do Grid para telas pequenas, determinando quantas coluna o conteúdo vai ocupar para cada tamanho de tela. Tipo col-6 col-md-4 isso significa que até telas médias ocupa 4 colunas (33,3% da largura da tela), e em telas menores que isso ocupa 6 colunas (50% da largura da tela)

Aqui no snipper não fica legal pq a tela é muito pequena, veja como fica:

OBS: Seria bom vc dar uma pausinha no desenvolvimento e dar uma olhada com calma na documentação do Grif https://getbootstrap.com/docs/4.0/layout/grid/, procure tb no YouTube, lá tem muito material sobre como entender o Grid e a forma como ele funciona! Depois que vc entender isso vc nunca mais terá problema com esses layout... Da uma pesquisada lá que vai te ajudar tb.

body {
      margin: 0;
      padding: 0;
      background: #e84118;
    }

    img.logo {
      width: 250px;
      height: 70px;
    }

    .prodf {
      display: flex
    }

    .form-control-borderless {
      border: none;
    }

    .form-control-borderless:hover,
    .form-control-borderless:active,
    .form-control-borderless:focus {
      border: none;
      outline: none;
      box-shadow: none;
    }

    .minhaconta {
      margin-top: 10px;
    }

    .dropspc {
      background: #000;
    }

    /* actual dropdown animation */
    .dropdown .dropdown-menu {
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;

      max-height: 0;
      display: block;
      overflow: hidden;
      opacity: 0;
    }

    .dropdown.open .dropdown-menu {
      max-height: 400px;
      background: #000;
      width: 200px;
      opacity: 1;
    }

    .boxone {
      width: 270px;
      height: 150px;
      background: #000;
    }

    .boxonee {
      width: 270px;
      height: 150px;
      background: #000;
    }

    /*import*/
    .xd .carousel-item {
      overflow: hidden;
      width: 100%;
      height: 100%;
      /* aqui vc ajusta a altura do slider */
    }

    .xd .carousel-item img {
      width: 100%;
      /* transform: translateY(-50%)  habilitar se quiser pocicionar o meio da imagem no slider*/
    }

    /*import*/
  <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>
  

    

  <! carousel-->
  <div class="container bg-danger">
    <div class="row">
      <div class="col-4 mt-3 pr-4">
        <div class="boxonee ">teste xd</div>

      </div>
      <div class="col-4">
        <div id="carouselExampleCaptions" class="carousel slide mt-3 " data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class=""></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2" class="active"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item">
              <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide"
                alt="" src="https://placecage.com/100/100" data-holder-rendered="true">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide"
                alt="" src="https://placecage.com/100/100" data-holder-rendered="true">
            </div>
            <div class="carousel-item active">
              <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide"
                alt="" src="https://placecage.com/100/100" data-holder-rendered="true">
            </div>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="boxone mt-3 ml-4">teste 1</div>
        <div class="boxone  mt-3 ml-4">teste 2</div>
        <div class="boxone mt-3 ml-4">teste 2</div>
      </div>
    </div>
  </div>

4
  • vlw man consegui arrumar com o pr-0 e col 3 col 6 col 3
    – Felipe
    Commented 1/10/2018 às 15:26
  • desconhecia esse codigo, existe algo no site bootstrap que mostram todas as class?
    – Felipe
    Commented 1/10/2018 às 15:26
  • entre o semantic ui, e o bootstrap qual desses 2 vc aconselharia?
    – Felipe
    Commented 1/10/2018 às 15:29
  • 1
    @Felipe não conheço o outro, mas te aconselho o Bootstrap, ele é amplamente conhecido, documentado e tem MUITO material disponível pra vc estudar! Só usar col-3 6 3, pode não resolver totalmente para telas pequenas... Tente dar uma pesquisar sobre "como usar o grid do bootstrap" pra vc ter total controle disso... Vai te ajudar muito no futuro!
    – hugocsl
    Commented 1/10/2018 às 15:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .