使用引导程序格式化列和行

Question

>我有一个模态，我在格式化时遇到问题。我是一个新手前端编码员，所以请原谅混乱的代码。

现在我正在使用引导列和卡进行以下操作

网站图片，因为我没有足够的声誉

问题是我无法让第二行靠近第一行。 不确定在这种情况下哪种 CSS 元素有用。我想要向上移动的元素是在代码中标记为"事物"和"第二行"的东西。

无论如何，这是涉及的代码：

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="test">
<div class="modal-dialog modal-lg" style="overflow-y:auto">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">ORDER SUMMARY</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- start content -->
<div class="container-fluid">
<!-- FIRST ROW -->
<!-- left column -->
<div class="row" style="width: 100%">
<div class="col-md-4" style = "width:0%; margin-right: 10%;"> ORDER DETAILS 
<hr>  
<!-- Order Number -->
<div class="form-group" style = "margin-right: 10%;">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" style= "display: inline">
</div>
</div>
<!-- right column -->
<div class="col-md-4" style="width:100%; margin-right:20%; height:20rem;" id = "order-summary"> ORDER SUMMARY
<div class="card" style="width:17rem; height:24rem">
<div class="card-body" style="width:100%" id="item-summary">                
</div>
</div>
</div>
</div> 
<!-- SECOND ROW -->
<div class = "row">
<div class="col-md-4 ml-auto" style = "width:100%; margin-right: 20%; position:fixed;"> things   
<hr>  
<!-- Order Number -->
<!-- <div class="form-group" style = "margin-right: 10%;">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" style= "display: inline">
</div>      
-->
</div> 
</div> 

</div>

.CSS：

.row {
display: flex;
}
.col {
flex: 50%;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
.modal-content {
width: 29rem;
height: 38;
margin: auto;
}
}
label{
font-weight: bold;
}
#create-order-modal {
width: 750px !important;
margin: auto !important;
}
.modal-content {
width: 35rem;
height: 35rem;
margin: auto;
} 
.container-fluid{
display:inline;
}

我确定我的问题有某种快速解决方案，但我似乎找不到解决方案。由于某种原因，第一行元素太大，但是我没有制作任何影响高度大小的 CSS 元素。

Answer 1

网格结构存在一些问题，更重要的是，您应该使用d-flex flex-clolumn和flex-grow-1而不是设置elements的高度。如果要更改模态的宽度，请更改modal-dialog的宽度。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Order Summary</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col d-flex flex-column">
<div class="w-100">
<p>ORDER DETAILS </p>
<hr>  
<!-- Order Number -->
<div class="form-group" >
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
</div>
<div class="mt-auto">
<p>Things</p>
<hr>  
</div>
</div>
<div class="col d-flex flex-column">
<p>Order Summary</p>
<div class="card flex-grow-1" >
<div class="card-body" id="item-summary">      
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, corrupti asperiores nam possimus cum velit nemo sunt, atque voluptate natus, sed dolore praesentium nisi repellendus? Modi totam debitis facere voluptatem!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, corrupti asperiores nam possimus cum velit nemo sunt, atque voluptate natus, sed dolore praesentium nisi repellendus? Modi totam debitis facere voluptatem!</p>
</div>
</div>
</div> 
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

---

https://codepen.io/anon/pen/QxzXoK

我从外部div上取下了modal，以便模态可见。如果在项目中使用代码，则应添加它。

---

如果您有任何问题或代码中有任何问题，我可能会回答，请发表评论。