Início / coding / Perguntas / 79343238
Accepted
xanabobana
Asked: 2025-01-09 23:46:07 +0800 CST

Alterar largura da entrada e do rótulo do formulário em linha

  • 772

Estou tentando alterar a largura de um inteiro form-inline-tanto o inpute label.
Você pode ver a caixa de pesquisa e o rótulo nesta página suspensa e eu gostaria que eles se encaixassem na mesma linha.https://dev.vmc.w3.uvm.edu/xana/CI4/data/archive/project/1977-1985_Vermont_Sugarbush_Health_Survey/dataset/1977-vermont-sugarbush-health-survey-tree/data#

<div class="query-editor-here " style="display:inline; ">
  <div class="recline-query-editor ">
    <form action=" " method="GET " class="form-inline ">
      <div class="input-prepend text-query ">
        <span class="add-on "><i class="icon-search "></i></span>
        <label>Search</label>
        <input type="text " name="q " value=" " class="span2 form-control " placeholder="Search data ... ">
      </div>
      <button type="submit " class="btn ">Search</button>
    </form>
  </div>
</div>

Aqui está o código para a linha inteira, mas o código acima é o código que estou almejando alterar

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="recline-data-explorer ">
  <div class="alert-messages "></div>
  <div class="header clearfix ">
    <div class="navigation ">
      <div class="btn-group " data-toggle="buttons-radio ">
        <a href="#grid " data-view="grid " class="btn btn-secondary active ">Table</a>
        <a href="#graph " data-view="graph " class="btn btn-secondary ">Graph</a>
      </div>
    </div>
    <div class="recline-results-info "> Displaying <span class="doc-count ">1000</span> records
    </div>
    <div class="recline-pager ">
      <div class="pagination ">
        <nav aria-label="Page navigation ">
          <ul class="pagination d-flex ">
            <li class="prev action-pagination-update page-item "><a class="page-link " href=" ">«</a></li>
            <li class="active page-item "><label for="from ">From</label><a class="page-link "><input name="from " type="text " value="1 "> – <label for="to ">To</label><input name="to " type="text " value="100 "> </a></li>
            <li class="next action-pagination-update page-item "><a class="page-link " href=" ">»</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="menu-right ">
      <div class="btn-group " data-toggle="buttons-checkbox ">
        <a href="# " data-action="filterEditor " class="btn btn-secondary ">Filter</a>
        <a href="# " data-action="fieldsView " class="btn btn-secondary active " aria-pressed="true ">Fields</a>
      </div>
    </div>
    <div class="query-editor-here " style="display:inline; ">
      <div class="recline-query-editor ">
        <form action=" " method="GET " class="form-inline ">
          <div class="input-prepend text-query ">
            <span class="add-on "><i class="icon-search "></i></span>
            <label>Search</label>
            <input type="text " name="q " value=" " class="span2 form-control " placeholder="Search data ... ">
          </div>
          <button type="submit " class="btn ">Search</button>
        </form>
      </div>
    </div>
  </div>

Tentei adicionar w-50à entrada, mas isso criou espaço entre a entrada e o rótulo, mas deixou o formulário inteiro com a mesma largura. Tentei alterar a largura de <div class="recline-query-editor ">, primeiro usando w-50but que fez com que o div ocupasse 50%a linha inteira, e depois adicionando style="width:100;"but que fez o rótulo de pesquisa cair abaixo da caixa de pesquisa.

Como altero a largura do formulário?

css

1 respostas

  1. Best Answer

    Consegui ajustar um pouco seu código para que ele coubesse em uma linha. Você certamente poderia adicionar código adicional para ajustar dinamicamente os tamanhos desses elementos dentro do seu div ~container <div class="header clearfix">.

    Identifiquei a fonte do seu problema. Três coisas que ajustei:

    1. Aplique sua classe w-75 ao seu elemento e remova o estilo width: 75% !important; que está incluído nessa classe.
    2. Em seguida, você precisa atualizar o estilo de largura da sua consulta de mídia que é atribuído ao seu Elemento de Pesquisa de Entrada. A largura é definida como auto. Quando eu ajusto e adiciono uma largura real, como 100px, tudo cabe em uma linha. Não é perfeito, mas deve colocá-lo na direção certa.
    3. Por último, adicionei algum espaço entre sua Entrada e o Botão usando uma <span>tag e configurei o texto InnerHTML para &nbsp. Você provavelmente poderia atualizar algumas margens, mas adicionar uma tag Span para passar a mensagem foi fácil o suficiente.

    Ferramentas de desenvolvimento de captura de tela :

    Captura de tela das ferramentas de desenvolvimento

    Captura de tela do seu site com ajustes :

    Captura de tela do site

    • 0

relate perguntas