用引导创建Css框

Question

我正在尝试创建一个带有引导的css框。请在这里查一下，JSfiddle

• 填充框为什么毛边顶不起作用！
• 输入必须是相同的对齐，但这不是为什么！

在这里我的HTML

<div class="row">
            <div class="col-sm-8 CssBox">
                <div class="MargingBox">
                <input type="text" class="form-control" id="MarginTop" placeholder="-">
                <input type="text" class="form-control" id="MarginRight" placeholder="-">
                <input type="text" class="form-control" id="MarginBottom" placeholder="-">
                <input type="text" class="form-control" id="MarginLeft" placeholder="-">
                    <div class="BorderBox">
                    <input type="text" class="form-control" id="BorderTop" placeholder="-">
                    <input type="text" class="form-control" id="BorderRight" placeholder="-">
                    <input type="text" class="form-control" id="BorderBottom" placeholder="-">
                    <input type="text" class="form-control" id="BorderLeft" placeholder="-">
                        <div class="PaddingBox">
                        <!--<input type="text" class="form-control" id="PaddingTop" placeholder="-">
                        <input type="text" class="form-control" id="PaddingRight" placeholder="-">
                        <input type="text" class="form-control" id="PaddingBottom" placeholder="-">
                        <input type="text" class="form-control" id="PaddingLeft" placeholder="-">-->
                        </div>
                    </div>
                </div>
            </div>

Answer 1

您可以使用float:left或display: inline-block;设置上边距。

​

.CssBox .MargingBox {
	position: relative;
	border: 1px dashed #CCC;
	height: 250px;
	
}
.CssBox .BorderBox {
	background-color: #e3e7ed;
    float: left;
    height: 166px;
    margin: 44px;
    position: relative;
    width: 100%;
	
}
.CssBox .PaddingBox {

	background-color: #ff0000;
    float: left;
    height: 86px;
    margin: 44px;
    width: calc(100% - 90px);
	
}
.CssBox input {
	width: 30px !important;
	height: 25px;
	position: absolute;
	padding: 5px;
	text-align: center;
	border-radius: 0;
}
.CssBox .MargingBox input#MarginTop ,
.CssBox .BorderBox input#BorderTop ,
.CssBox .PaddingBox input#PaddingTop {
	left: 45%;
	top: 12px;
	
}
.CssBox .MargingBox input#MarginRight , 
.CssBox .BorderBox input#BorderRight ,
.CssBox .PaddingBox input#PaddingRight{
	top: 50%;
	right: 8px;
	
}
.CssBox .MargingBox input#MarginBottom, 
.CssBox .BorderBox input#BorderBottom ,
.CssBox .PaddingBox input#PaddingBottom{
	left: 46%;
	bottom: 6px;
}
.CssBox .MargingBox input#MarginLeft,
.CssBox .BorderBox input#BorderLeft ,
.CssBox .PaddingBox input#PaddingLeft{
	top: 46%;
	left: 8px;

}

<div class="modal-body">
		 <div class="row">
		 	<div class="col-sm-8 CssBox">
		 		<div class="MargingBox">
		 		<input type="text" class="form-control" id="MarginTop" placeholder="-">
		 		<input type="text" class="form-control" id="MarginRight" placeholder="-">
		 		<input type="text" class="form-control" id="MarginBottom" placeholder="-">
		 		<input type="text" class="form-control" id="MarginLeft" placeholder="-">
		 			<div class="BorderBox">
		 			<input type="text" class="form-control" id="BorderTop" placeholder="-">
		 			<input type="text" class="form-control" id="BorderRight" placeholder="-">
		 			<input type="text" class="form-control" id="BorderBottom" placeholder="-">
		 			<input type="text" class="form-control" id="BorderLeft" placeholder="-">
		 				<div class="PaddingBox">
		 				<!--<input type="text" class="form-control" id="PaddingTop" placeholder="-">
		 				<input type="text" class="form-control" id="PaddingRight" placeholder="-">
		 				<input type="text" class="form-control" id="PaddingBottom" placeholder="-">
		 				<input type="text" class="form-control" id="PaddingLeft" placeholder="-">-->
		 				</div>
		 			</div>
		 		</div>
		 	</div>
		 </div> 
		  <div class="col-sm-4"></div>
      </div>

​

Answer 2

因为你的填充盒是我试过和工作过的

对于未对齐的输入，是因为您为两个盒子的输入分别提供了顶部、左边、右侧的底部，以便它们占据双方各自的位置，因此可能在这方面起作用。

​

.CssBox .PaddingBox {
    position:relative;
    top:25%;
	margin: 44px;
	height:86px;
	background-color: red;
}

​

看看那把小提琴

演示