代码之家 › 专栏 › 技术社区 › user2743706

通过添加div来放松其风格

division twitter-bootstrap html javascript

user2743706 · 技术社区 · 7 年前

我想克隆的部门有一个特定的位置。我怎么能加上我的其他除法呢。

我的div样式代码

<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-8  verticalLine" id="nestedFeilds"  style=" margin-left: 10px ;float:left; display: none;">

这里是它的链接 https://screenshots.firefox.com/TAqBN5IIT8atR6lA/localhost

我呈现上述代码的地方是

<div class= "row" id="2ndmainContainer">
    <div class="col-xs-4"></div>
    <div class="col-xs-8  verticalLine" id="showhere"  style=" margin-left: 10px ;float:left;">
    </div>
</div>

在我的nestedFeilds节目结束后不久。我有“showhere”div,它只出现在第行的“col-xs-8”上,“col-xs-4”不起作用在append函数之后,它是这样的

https://screenshots.firefox.com/IngUgWgQTJeAjlOC/localhost

用于追加的jquery函数

$(document).ready(function() {


 $("#addNew").click(function() {
    var maindiv = document.getElementById('nestedFeilds').innerHTML;
    $("#showhere").append(maindiv);
     maindiv.attr('name', 'myid');
  });
});

这里是jsfiddle,但这里不起作用 https://jsfiddle.net/r9wtcsj9/

1 回复 | 直到 7 年前

Phani Kumar M 7 年前

希望这能帮助你(全屏查看结果)。你可以看到我所做的改变,包括 col-md-1 和 col-md-5 对于列和删除的内联样式 label . 其余代码保持不变。

$("#addNew, #addNew1").click(function () {
	if ($("#nestedFeilds").is(":visible")) {
		$("#showhere").append($("#nestedFeilds").html());
		$("#2ndmainContainer").show();
	}

	$("#nestedFeilds").attr('name', 'myid').show();
	$("#addNew").hide();
	$("#addNew1").show();
});

.verticalLine {
    border-left: thick solid #0accff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form>
<label>Your Profile</label>
<div class="row" id="mainContainer">
	<div class="col-md-1 col-xs-4">
		<label for="Education">Education</label>
	</div>
	<div class="col-md-7 col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display:none;">
		<a href="" style="color: red;float:right; ">Delete Education</a>
		<input type="text" placeholder="School Name" class="form-control" id="School_Name" required="" name="School_Name">
		<br>
		<input type="text" placeholder="Feild of Study" class="form-control" id="feild_Name" required="" name="feild_Name">
		<br>
		<input type="text" placeholder="Degree" class="form-control" id="Degree_Name" required="" name="Degree_Name">
		<br>
		<div class="row">
			<div class="col-xs-3">
				<select class="form-control" id="YearName" style="float:left;" required="" name="first_year_name" value=''>
				  <option value="2017">2017</option>
			  </select>
			</div>
			<div class="col-xs-3">
				<select class="form-control" style="margin-left: -20px; float:left;" id="monthName" required="" name="first_Name_month" value=''>Select Month
				  <option value='01'>January</option>
			  </select>
			</div>
			<div style="margin-left: -20px;float:left;">
				<p style="text-align: left; margin-top: 5px">&nbsp;to</p>
			</div>
			<div class="col-xs-3">
				<select class="form-control" id="YearName" style="margin-right:30px; float:left;" required="" name="second_year_name" value=''>Select Month
				  <option value="2017">2017</option>
			  </select>
			</div>
			<div class="col-xs-3">
				<select class="form-control" id="monthName" style="float:left; margin-left: -20px;" required="" name="Second__Name_month"
					value=''>Select Month
					  <option value='01'>January</option>
			  </select>
			</div>
		</div>
	</div>
	<div style="float:left;"><a id="addNew"> Add Education</a></div>
</div>

<div class="row" id="2ndmainContainer" style="display:none;">
	<div class="col-md-1 col-xs-4"></div>
	<div class="col-md-7 col-xs-8 verticalLine" id="showhere" style=" margin-left: 10px ;float:left;">
	</div>
</div>

<div style="margin-left: 133px;float:left;"><a id="addNew1" style="display:none;"> Add Education</a></div>
</form>