Question

嗨，我是boothstrap的新手，我努力将下拉放置如下图所示，但我发现难以放置标签和下拉，如下图所示，这是我的代码

这是一个小提琴，但我无法正确运行我的代码

我的部分代码

    <div class="form-group m-t-40 row" style="margin-top: 4px;">

   <label for="companyName" class="col-2 col-form-label" style="margin-left: 40px; text-align: right; color: #455a64;margin-left: 50px"> labe2 </label>


     <label for="companyName" class="col-2 col-form-label" style="text-align: right; color: #455a64;"><label class="custom-control custom-checkbox">
             <input type="checkbox" class="custom-control-input" >
             <span class="custom-control-indicator"></span>
             <span class="custom-control-description"> In House</span>
                                                </label></label>
                                        <div class="col-2" style="padding-right: 45px;">
                                        <div class="controls">
                                                <select name="addressType" id="select11" disabled="disabled" class="form-control" style="width: 180px; padding-bottom: inherit; padding-top: inherit;">
                                                    <option value="">--Select--</option>
                                                    <option value="1">Corporate Office</option>
                                                    <option 
                                                    <option value="3">Sales Office</option>
                                                    <option value="4">Accounts </option>

                                            </select>
                                        </div>



                                    </div>

 <label for="companyName" class="col-2 col-form-label" style="text-align: right; color: #455a64;"><label class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" onchange="document.getElementById('select12').disabled = !this.checked;">
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description"> Out Source</span>
                                            </label></label>
                      <div class="col-2" style="padding-right: 45px;">
                             <div class="controls">
                                          <select name="addressType" id="select12"  class="form-control" style="width: 180px; padding-bottom: inherit; padding-top: inherit;">
                           <option value="">--Select--</option>
                        <option value="1">Corporate </option>
                            <option value="3">Sales </option>
                          <option value="4">Accounts </option>

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

Answer 1

查看显示块和内联块

这将解决您的问题

label,
input[type="image"], 
input[type="checkbox"], 
input[type="radio"]
select,
div{
  display: inline-block
}

Answer 2

我强烈建议您阅读并熟悉Bootstrap在其网格上的文档及其表单结构。下面是一个单项（标签1）的示例，其中删除了所有JavaScript和内联样式，以便您可以更好地查看如何使用Bootstrap作为框架构建此布局。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<!-- Item #1 -->
<div class="form-group row align-items-center">

  <!-- Label -->
  <label for="companyName" class="col-2 col-form-label">Label 1</label>

  <!-- Checkbox #1 -->
  <div class="col-2 text-right">
    <div class="form-check">
      <label class="form-check-label"><input type="checkbox" class="form-check-input"> In House</label>
    </div>
  </div>

  <!-- Select #1 -->
  <div class="col-3">
    <select name="addressType" class="form-control custom-select">
    <option value="">--Select--</option>
    <option value="1">Corporate Office</option>
    <option value="3">Sales Office</option>
    <option value="4">Accounts </option>
    </select>
  </div>

  <!-- Checkbox #2 -->
  <div class="col-2 text-right">
    <div class="form-check">
      <label class="form-check-label"><input type="checkbox" class="form-check-input"> Out Source</label>
    </div>
  </div>

  <!-- Select #2 -->
  <div class="col-3">
    <select name="addressType" class="form-control custom-select">
    <option value="">--Select--</option>
    <option value="1">Corporate Office</option>
    <option value="3">Sales Office</option>
    <option value="4">Accounts </option>
    </select>
  </div>
</div>

您还可以在此处查看Bootply：https://www.bootply.com/yFiLE8GosQ

还有一些假设（1）所有这些都存在于.container和（2）中，而上面的例子对几个表单元素使用相同的name;你的实时/生产代码不会。

如何对齐具有特定宽度的文本框和标签

2 个答案: