Div标签是垂直显示而不是水平显示?

我有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";
            }
        });

enter image description here

评论
  • 飞雨
    飞雨 回复

    试试:x.style.display =“ inline”; 在你的职能