css - Change width of form-inline input and label - Stack Overflow

admin管理员组

文章数量:1124791

I'm trying to change the width of an entire form-inline- both the input and label.
You can see the search box and label on this page drops down and I would like it to fit on the same line.

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

Here is the code for the entire line, but the above code is the code I am targeting to change

<link href="/[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>

I'm trying to change the width of an entire form-inline- both the input and label.
You can see the search box and label on this page drops down and I would like it to fit on the same line. 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>

Here is the code for the entire line, but the above code is the code I am targeting to change

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

I tried adding w-50 to the input, but that created space between the input and label, but left the entire form the same width. I tried changing the width of <div class="recline-query-editor ">, first by using w-50 but that caused the div to take up 50% of the entire line, and then by adding style="width:100;" but that made the search label drop below the search box.

How do I change the width of the form?

• css
• twitter-bootstrap

Share Improve this question Follow edited 2 days ago Mister Jojo 22.2k66 gold badges2525 silver badges4242 bronze badges asked 2 days ago xanabobanaxanabobana 6333 silver badges1919 bronze badges 2

• Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet using the <> icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/example doesn't work can I just paste a link. – Paulie_D Commented 2 days ago
• ok, updated to add more code – xanabobana Commented 2 days ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I was able to slightly adjust your code to get it to fit on one line. You could certainly add additional code to dynamically adjust the sizes of these elements within your ~container div <div class="header clearfix">.

I pinpointed the source of your issue. Three things I adjusted:

1. Apply your w-75 class to your element and remove the width: 75% !important; style that is included in that class.
2. Next you need to update your media query width style that is assigned to your Input Search Element. The width is set to auto. When I adjust and add an actual width such as 100px it all fits on one line. Not perfect but it should get you going in the right direction.
3. Last I added some space between your Input and the Button using a <span> tag and set the InnerHTML text to &nbsp. You could probably instead update some margins but adding a Span tag to get the point across was easy enough.

Screenshot Dev Tools:

Screenshot of your site with adjustments:

本文标签： cssChange width of forminline input and labelStack Overflow