Блог

У меня есть <select> и кнопка рядом друг с другом, и я хотел оформить их с помощью bootstrap. Select без класса выглядит так:

select с class="form-control" выглядит следующим образом:

Обратите внимание, что кнопка теперь находится под выбором. Я не уверен, какое свойство CSS отвечает за это. Что я должен изменить, чтобы кнопка была рядом с выбором?

Вы можете обернуть <select> и <button> в input-group :

 <div class="input-group">
  <select class="form-control">
    <option>Select option..</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>            
  <span class="input-group-btn">
    <button class="btn btn-default" type="button" tabindex="-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
  </span>
</div>
  

Таким образом, вы можете использовать обычную форму и просто сгруппировать один выбор и кнопку вместе.

Ознакомьтесь с примером JSFiddle

Следующий синтаксис Boostrap :

Вы должны добавить form-inline класс в свою форму, смотрите официальный документ

Официальный пример

 <form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
  

Другой подход заключается в том, чтобы обернуть элементы управления в flex div:

 <div style="display: flex;">
  <select class="form-control">...</select>
  <!-- optional spacer: <div style="width: 8px;" /> -->
  <button type="button" class="btn btn-default">Click Me!</button>
</div>
  

Bootstrap 4

Используйте вспомогательные классы! d-flex подойдет просто отлично.

 body {

  padding-top: 20px;
}  

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-12">

      <!-- Wrap your 2 elements in a d-flex -->

      <div class="d-flex">
        <select class="form-control mr-2">
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
        <input type="button" class="btn btn-secondary" value="Select" />
      </div>

    </div>
  </div>
</div>  

Скорее всего, это то, что вы хотите…

 <div style={{display: "flex"}}>
    <div style={{width: "80%"}}>
        <Textbox
          attributesInput={{ // Optional.
            id: 'listPrice',
            name: 'listPrice',
            type: 'text', 
            placeholder: 'Please Enter List Price',
          }}
          class="field inputField"
          value={listPrice} // Optional.[String].Default: "".
          onChange={(value) => handleSetListPrice(value)} // Required.[Func].Default: () => {}. Will return the value.
          onBlur={() => {}} // Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.
          validationOption={{
            type: 'number', // Optional.[String].Default: "string". Validation type, options are ['string', 'number', 'alphanumeric', 'alpha'].
            min: 1, // Optional.[Number].Default: 0. Validation of min length when validationOption['type'] is string, min amount when validationOption['type'] is number.
            max: 100, // Optional.[Number].Default: 0. Validation of max length when validationOption['type'] is string, max amount when validationOption['type'] is number.
            mantissa: 2 // Optional.[Number].Default: -1. Number precision.
          }}
        /> 
    </div>
    <div style={{width: "20%"}}>
        <Select  options={[ { value: 'eth', label: 'ETH' }, { value: 'xyzx', label: 'XYZ' } ]} />
    </div>
</div> 
</div> 
  

Как и сказал Люк, но используйте input-group-append для диапазона кнопок. Это избавляет от округлости кнопки и обеспечивает лучшее соответствие.