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

你在做错的是你的数学。就像@efkin说你只有12列。但是你用col-6定义了三个div。这意味着3 * 6 = 18。当你想在一行上有3个大小相等的列时，你必须为每个列使用col-4，因为3 * 4 = 12。

＆＃13;

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

＆＃13;

Answer 2

每行由12列

组成

将组件放在搜索字段的旁边

2 个答案: