放組件

Question

我開發一個Web應用程序，並希望我EntreCadastre-SE | Carrinho菜單旁邊的文本字段，但它越來越下面

<div class="row"> 

     <div class="col-6 col-md-4 col-xs-4"> 
      <img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal" > 
     </div> 

     <div class="col-6 col-md-4"> 

      <div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div> 
     </div> 

     <div class="col-6 col-md-4"> 

      <ul class="menu_2"> 

       <div class="btn-group" role="group"> 
        <div class="btn-group" role="group"> 

            Entre/Cadastre-se <span class="caret"></span> 


        </div> 
        <button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ()</button> 
       </div> 

      </ul> 


     </div> 

    </div> 

Answer 1

每行由12列組成

Answer 2

你在做什麼錯在這裏是你的數學。像@efkin說，你只有12列。但是你已經用col-6定義了三個div。這意味着3 * 6 = 18。 當你想3列與上一行相同大小必須使用COL-4對於每個，因爲3 * 4 = 12。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="row"> 
 

 
     <div class="col-4 col-md-4 col-xs-4"> 
 
      <img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal" > 
 
     </div> 
 

 
     <div class="col-4 col-md-4"> 
 

 
      <div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div> 
 
     </div> 
 

 
     <div class="col-4 col-md-4"> 
 

 
      <ul class="menu_2"> 
 

 
       <div class="btn-group" role="group"> 
 
        <div class="btn-group" role="group"> 
 

 
            Entre/Cadastre-se <span class="caret"></span> 
 

 

 
        </div> 
 
        <button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ()</button> 
 
       </div> 
 

 
      </ul> 
 

 

 
     </div> 
 

 
    </div>