Início / user-11908297

xanabobana's questions

Martin Hope
xanabobana
Asked: 2025-01-09 23:46:07 +0800 CST
  • 6

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