2017-10-13 5 views
1

나는 웹 응용 프로그램을 개발하고 내 EntreCadastre-자체 싶습니다 | Carrinho 메뉴는 텍스트 필드 옆으로하지만, 아래넣어 구성 요소는

enter image description here

<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> 

답변

0
을 받고있다

각 행은 12 개의 열로 이루어져 있습니다.

+0

하지만 내가 Entre \ Cadastre-se 메뉴를 @media 블록 – Felipe

+0

과 함께 검색 상자 옆에 놓고 싶다면 이미 col-6이있는 열에 있습니다. 문제는 메뉴의 너비가 줄어들 때입니다. 검색 필드 아래에 있고 문제가있는 쪽이 아니라 – Felipe

0

여기서 잘못된 것은 무엇입니까? @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>

+0

이미 col-6이있는 열에 있습니다. 문제는 메뉴가 페이지의 너비를 줄이면 검색 필드 아래가 아니라 검색 필드 아래에있는 것입니다. 문제 다. – Felipe