div标签垂直显示而不是水平显示？

Question

我有 3 个 div 元素，每个元素的宽度为 4 我想将它们全部对齐 4 个连续我还使用切换按钮来显示这些 div，因为默认情况下这些 div 显示没有，但是当我用户单击切换时按钮 div 将向他显示问题是 div 正在显示但它们垂直显示在三行中我想在单行中水平显示它们。

<div class="col-lg-4">
  <div class="custom-control custom-switch" style="margin-left:25px">
   @Html.CheckBox("Select Raw Targets", new { @class = "custom-control-input", id = "rawTargetSelection" })
   <label class="custom-control-label" for="rawTargetSelection">Select Raw Targets</label>
                                    </div>
                                </div>
<!-- Raw Target Tags Values Tabs Starts Here -->
                            <div class="row" id="Real_Tag_Targets" style="display:none">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Select Real Tag Targets</label>
                                        @Html.DropDownList("Raw Tag Targets", (IEnumerable<SelectListItem>)ViewBag.rawTagTargetValue, new { @class = "form-control add_item", @multiple = true, id = "Raw_Tag_Target_List" })
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Select Real Tag Min Targets</label>
                                        @Html.DropDownList("Raw Tag Min Targets", (IEnumerable<SelectListItem>)ViewBag.rawTagTargetMin, new { @class = "form-control add_item", @multiple = true, id = "Raw_Tag_Min_Target_List" })
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Select Real Tag Max Targets</label>
                                        @Html.DropDownList("Raw Tag Max Targets", (IEnumerable<SelectListItem>)ViewBag.rawTagTargetMax, new { @class = "form-control add_item", @multiple = true, id = "Raw_Tag_Max_Target_List" })
                                    </div>
                                </div>
                            </div>

 $("#rawTargetSelection").change(function () {
             var x = document.getElementById("Real_Tag_Targets");
            if (x.style.display === "none") {
              x.style.display = "block";
            }
            else
            {
               x.style.display = "none";
            }
        });

Answer 1

您在 col 之后开始一行，如果没有完整的代码，很难分辨。推荐更好的示例代码。也可以尝试不使用服务器代码，只使用 html 输出，因为这显然是一个标记问题。 您可以从下面的示例中看出，标记 col-md-4 可以按预期工作（如果屏幕尺寸允许的话）。

另外：您正在将行（使用 display:flex）设置为 display:block；

$("#rawTargetSelection").change(function() {
  var x = document.getElementById("Real_Tag_Targets");
  if (x.style.display === "none") {
    //x.style.display = "block";
    x.style.display = "flex";
  } else {
    x.style.display = "none";
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
  <div class="custom-control custom-switch" style="margin-left:25px">

    <label class="custom-control-label" for="rawTargetSelection">Select Raw Targets</label>
  </div>
</div>
<!-- Raw Target Tags Values Tabs Starts Here -->
<div class="row" id="Real_Tag_Targets">
  <div class="col-md-4">
    <div class="form-group">
      <label>Select Real Tag Targets</label> -input-
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      <label>Select Real Tag Min Targets</label> -input-
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      <label>Select Real Tag Min Targets</label> -input-
    </div>
  </div>
</div>

<!-- Raw Target Tags Values Tabs Starts Here -->
<div class="row" id="Real_Tag_Targets">
  <div class="col-4">
    <div class="form-group">
      <label>Select Real Tag Targets</label> -input-
    </div>
  </div>
  <div class="col-4">
    <div class="form-group">
      <label>Select Real Tag Min Targets</label> -input-
    </div>
  </div>
  <div class="col-4">
    <div class="form-group">
      <label>Select Real Tag Min Targets</label> -input-
    </div>
  </div>
</div>

<style>
  div, label {
    border: 1px dotted #f00;
  }
</style>

Answer 2

我认为问题可能出在您的@html 复选框样式属性上，请检查一下。因为没有它，它可以工作。

Answer 3

试试：

x.style.display = "inline";

在你的函数中