时间戳

首页 > 解决方案 > 使用 Bootstrap 格式化列和行

html - 使用 Bootstrap 格式化列和行

问题描述

我有一个无法格式化的模态。我是一个新手前端编码器，所以请原谅凌乱的代码。

现在我正在使用引导列和一张卡片来制作以下内容

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

问题是我无法让第二排靠近第一排。不确定在这种情况下哪种 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 元素。

标签： htmlcssbootstrap-4

解决方案

网格结构存在一些问题，更重要的是，您应该使用d-flex flex-clolumnandflex-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

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

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

推荐阅读