Question

我试图将“卖方”容器移到“公司商店”容器的正下方。我添加了视觉演示。

我尝试使用CREATE PROCEDURE [dbo].[PRC_BizAgi_Obtener_Anualidad] @id_NinoCentro INT AS BEGIN SET NOCOUNT ON; DECLARE @periodo INT SET @periodo = YEAR(GETDATE()) -- rest of your procedure here.... END和clear:both；但是，它搞砸了其他容器：“客户”和“产品”。
因此，我尝试将“卖方”容器放入新行，并尝试使用clear:left将“卖方”容器放置在“公司”容器下方。

由于“客户”容器很大，因此在“卖方”和“公司”容器之间造成了巨大的差距。有什么办法可以解决这个问题或以其他方式解决这个问题？

谢谢

jsfiddle

Answer 1

通过将“公司存储”和“卖方ID”都包装在自己的“ col-xs-3”容器中，然后剥离相同的类别，我达到了您的最终结果。

<!DOCTYPE html>
<html>

<head>
  <title>Corp Simulator</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
  <link rel="stylesheet" href="../css/sweetalert2.min.css">
  <link rel="stylesheet" href="../css/home.css">
</head>

<body>

  <!-- navigation -->
  <nav class="navbar navbar-default">

    <!-- container -->
    <div class="container">

      <!-- header -->
      <div class="navbar-header">
        <div class="col-xs-12 navbar-header-padding">
          <span class="col-xs-3"><img src="../img/corp-logo-flat.png"/></span>
          <span class="col-xs-9"><a class="navbar-brand">Corp Simulator</a><a type="button" data-toggle="modal" data-target="#buildModal" class="label label-default pull-right ">Build</a></span>
        </div>
      </div>

    </div>

  </nav>

  <!-- begin content -->
  <div class="col-sm-12">

    <div class="col-xs-8">

      <!-- corporation -->
      <div class="col-xs-12">
        <h2>Corporation</h2>

        <!-- begin form -->
        <form id="cForm">

          <!-- begin row -->
          <div class="row">


            <div class="col-xs-3">


              <!-- corporation store -->
              <div>
                <div class="panel panel-default">
                  <div class="panel-heading">Corporation Store</div>
                  <div class="panel-body">

                    <div class="col-xs-12 no-left-right-padding">
                      <div class="col-xs-6 no-right-padding">
                        <div class="form-group">
                          <label for="corpId">Corporation ID #</label>
                          <input type="text" class="form-control" tabindex="1" name="corpId" id="corpId" schoolId="corpId">
                        </div>
                      </div>
                    </div>

                    <div class="form-group">
                      <label for="startDate">Start Date</label>
                      <input type="datetime-local" class="form-control" tabindex="2" name="startDate" id="startDate" placeholder="Start Date">
                    </div>

                    <div class="form-group">
                      <label for="endTime">End Time</label>
                      <input type="datetime-local" class="form-control" tabindex="3" name="endTime" id="endTime" placeholder="End Time">
                    </div>

                  </div>
                </div>
              </div>

              <!-- seller info -->
              <div>
                <div class="panel panel-default">
                  <div class="panel-heading">Seller ID</div>
                  <div class="panel-body">

                    <div class="form-group">
                      <label for="sellerId">SE ID</label>
                      <input type="text" class="form-control" tabindex="4" name="sellerId" id="sellerId" placeholder="SE ID">
                    </div>

                    <div class="form-group">
                      <label for="seFirstName">SE First Name</label>
                      <input type="text" class="form-control" tabindex="5" name="seFirstName" id="seFirstName" placeholder="SE First Name">
                    </div>

                    <div class="form-group">
                      <label for="seLastName">SE Last Name</label>
                      <input type="text" class="form-control" tabindex="6" name="seLastName" id="seLastName" placeholder="SE Last Name">
                    </div>

                  </div>
                </div>
              </div>

              <div style="clear: both;"></div>
            </div>


            <!--customer -->
            <div class="col-xs-6">
              <div class="panel panel-default">
                <div class="panel-heading">Customer</div>
                <div class="panel-body">
                  <div class="col-xs-6">
                    <div class="form-group">
                      <label for="customerId">Customer ID</label>
                      <input type="text" class="form-control" tabindex="7" name="customerId" id="customerId" placeholder="Customer ID">
                    </div>
                    <div class="form-group">
                      <label for="companyName">Company Name</label>
                      <input type="text" class="form-control" tabindex="9" name="companyName" id="companyName" placeholder="Company Name">
                    </div>
                    <div class="form-group">
                      <label for="customerFirstName">First Name</label>
                      <input type="text" class="form-control" tabindex="11" name="customerFirstName" id="customerFirstName" placeholder="First Name">
                    </div>
                    <div class="form-group">
                      <label for="customerAddress1">Address 1</label>
                      <input type="text" class="form-control" tabindex="13" name="customerAddress1" id="customerAddress1" placeholder="Address 1">
                    </div>
                    <div class="form-group">
                      <label for="customerCity">City</label>
                      <input type="text" class="form-control" tabindex="15" name="customerCity" id="customerCity" placeholder="City">
                    </div>
                    <div class="form-group">
                      <label for="customerPostalCode">Postal Code</label>
                      <input type="text" class="form-control" tabindex="17" name="customerPostalCode" id="customerPostalCode" placeholder="Postal Code">
                    </div>
                    <div class="form-group">
                      <label for="customerPhone1">Phone 1</label>
                      <input type="text" class="form-control" tabindex="19" name="customerPhone1" id="customerPhone1" placeholder="Phone 1">
                    </div>

                  </div>
                  <div class="col-xs-6">
                    <div class="form-group">
                      <label for="relationshipType">Relationship</label>
                      <input type="text" class="form-control" tabindex="8" name="relationship" id="relationship" placeholder="Relationship">
                    </div>
                    <div class="form-group">
                      <label for="nationalId">National Identifier</label>
                      <input type="text" class="form-control" tabindex="10" name="nationalId" id="nationalId" placeholder="National ID">
                    </div>
                    <div class="form-group">
                      <label for="customerLastName">Last Name</label>
                      <input type="text" class="form-control" tabindex="12" name="customerLastName" id="customerLastName" placeholder="Last Name">
                    </div>
                    <div class="form-group">
                      <label for="customerAddress2">Address 2</label>
                      <input type="text" class="form-control" tabindex="14" name="customerAddress2" id="customerAddress2" placeholder="Address 2">
                    </div>
                    <div class="form-group">
                      <label for="customerState">State/Province</label>
                      <input type="text" class="form-control" tabindex="16" name="customerState" id="customerState" placeholder="State/Province">
                    </div>
                    <div class="form-group">
                      <label for="customerCountryCode">Country Code</label>
                      <input type="text" class="form-control" tabindex="18" name="customerCountryCode" id="customerCountryCode" placeholder="Country Code">
                    </div>
                    <div class="form-group">
                      <label for="customerPhone2">Phone 2</label>
                      <input type="text" class="form-control" tabindex="20" name="customerPhone2" id="customerPhone2" placeholder="Phone 2">
                    </div>
                  </div>
                  <div class="col-xs-12">
                    <div class="form-group">
                      <label for="customerEmail">Email</label>
                      <input type="email" class="form-control" tabindex="22" name="customerEmail" id="customerEmail" placeholder="Email">
                    </div>
                  </div>
                </div>
              </div>
            </div>


            <!-- product -->
            <div class="col-xs-3">
              <div class="panel panel-default">
                <div class="panel-heading">Product</div>
                <div class="panel-body">
                  <div class="form-group">
                    <label for="prodId">Product ID</label>
                    <input type="text" class="form-control" tabindex="23" name="prodId" id="prodId" placeholder="PRODUCT ID">
                  </div>
                  <div class="form-group">
                    <label for="modelYear">Year</label>
                    <input type="text" class="form-control" tabindex="24" name="modelYear" id="modelYear" placeholder="Year">
                  </div>
                  <div class="form-group">
                    <label for="model">Model</label>
                    <input type="text" class="form-control" tabindex="25" name="model" id="model" placeholder="Model">
                  </div>

                </div>
              </div>
            </div>


          </div>
          <!-- end row -->



        </form>
        <!-- end form -->

      </div>

    </div>

  </div>

</body>

</html>

该代码段的视图受到限制，但是您将看到想要实现的布局。

HTML-将<div>容器从下面移到下面一个而不破坏其他<div>容器

1 个答案: