Question

我试图将两个div并排居中但不知道如何做到这一点，有人可以帮助解决一些问题吗？目前他们更偏左。

＆＃13;

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1 col-sm-offset-0 col-sm-4 col-md-3">
      <h1>..</h1>
    </div>
    <div class="col-xs-10 col-xs-offset-1 col-sm-offset-0 col-sm-4 col-md-3">
      <h1>..</h1>
    </div>
  </div>
</div>

＆＃13;

Answer 1

试试这个

.item{
  display:inline-block;
  vertical-align:top;
  width:30%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class ="container-fluid">
 <div class="text-center">
    <div class="item">
      <input type="text" class="form-control">
      <input type="text" class="form-control">
      <input type="text" class="form-control">
   </div>
    <div class="item">
      <input type="text" class="form-control">
      <input type="text" class="form-control">
      <input type="text" class="form-control">
   </div>
 </div>
</div>

Answer 2

只需使用两个带有col-sm-6的div，它就会并排。

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <h1>Lorem ipsum dolor.</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus ullam distinctio non asperiores aspernatur omnis, autem debitis, voluptates quae, nisi repellendus, placeat at dolores quas optio provident labore quidem! Quo, eum. Blanditiis at quibusdam iste omnis tempora asperiores labore temporibus explicabo earum. Impedit laudantium doloremque odit ab quod accusamus natus architecto ipsam at numquam beatae accusantium assumenda nihil corrupti dolorem ullam omnis nobis error, in ut unde. Recusandae aspernatur, enim molestiae. Architecto fugit praesentium ipsam natus ducimus sit et odio inventore minus, quae id in sequi similique. Nemo doloribus mollitia nostrum, magnam architecto, nobis, suscipit maiores harum labore magni qui.</p>
            <h1>Unde, possimus, enim?</h1>
            <p>Dolor atque perspiciatis voluptas beatae, facilis incidunt asperiores in aliquam odio molestias. Ad ea dolor tenetur mollitia molestias fuga porro atque alias iste praesentium iure numquam voluptatum, nemo a possimus ipsam error quidem aspernatur modi eos amet soluta quisquam. Quod vel similique eos esse incidunt officiis, sit debitis tenetur illo facere corporis ipsum iusto, sequi ut, veritatis. Aliquam, dolore quod sint quas odit aperiam velit amet quasi sit delectus exercitationem blanditiis iure! Et minus quam earum natus eos facilis a temporibus debitis cum alias. Nihil laborum odio rem laboriosam alias, qui consectetur aliquam quasi ipsam voluptatum quis quia possimus natus.</p>
            <h1>Adipisci, assumenda, quam!</h1>
            <p>Rem, asperiores, saepe! Iure cupiditate, reprehenderit molestiae maiores dolor officiis distinctio, dignissimos vel nobis quis, neque beatae ducimus nemo. Quis fugiat sapiente repellat saepe. Incidunt explicabo quae natus dicta doloribus nulla dolore reiciendis quo minus, porro quibusdam temporibus esse iusto, assumenda repudiandae nam et harum earum repellendus ratione libero voluptatem, labore odio nesciunt! Molestias sapiente iste assumenda itaque accusantium, voluptatibus facilis eos laudantium magnam unde ex exercitationem eum ipsam vitae iure cupiditate consequuntur autem tenetur. Similique cupiditate, ducimus voluptas. Perspiciatis facere nemo eum expedita est aspernatur earum eos corporis harum, autem ex veniam nihil dolorem, repellat quasi, facilis, nulla minus!</p>
            <h1>Quam, dolores, temporibus.</h1>
            <p>Explicabo, maiores. Sed pariatur, debitis magni amet similique accusantium repellendus. Qui dolorum quam porro, nisi soluta culpa officiis velit in praesentium veritatis fugit eos enim quod mollitia, ex ipsa voluptates repellendus sed obcaecati minus perferendis. Porro quasi velit quia numquam doloremque. Adipisci ex eaque repellendus quam, qui voluptatibus consequuntur odio quasi ipsa sunt quia molestias iusto dolorem provident error, doloremque et temporibus nobis rem perferendis? Voluptatem architecto rerum quisquam iusto nostrum, eaque laudantium ratione facere enim doloribus, omnis, cumque voluptatibus, vitae excepturi. Iure repudiandae tenetur, molestias earum incidunt recusandae quas. Libero soluta nulla quibusdam dolorem hic distinctio, cupiditate autem accusantium?</p>
            <h1>Impedit, molestiae, et.</h1>
            <p>Voluptates est nisi incidunt culpa ex pariatur magnam architecto rerum, possimus quis dolor eveniet, quae neque, commodi sint aliquid. Consequuntur dolore quidem fugiat repellendus? Voluptate nesciunt consectetur perspiciatis cumque qui temporibus. Repellat alias ullam vero aspernatur quidem quam eos saepe ab a nobis amet architecto quos, ut maiores eius voluptatibus sequi suscipit sit accusantium commodi possimus quis rerum minima fugit! Eum est quisquam consequuntur recusandae aliquid dolorum eligendi, nobis, earum quas, officia reprehenderit sit nulla dolore nemo nesciunt tempora debitis error, non aspernatur fugit illum impedit ab! Amet praesentium delectus, obcaecati, veritatis rerum eligendi voluptatibus laborum repellendus consequatur dicta, perspiciatis.</p>
        </div>
        <div class="col-sm-6">
            <h1>Lorem ipsum dolor.</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur maiores velit unde animi ratione saepe commodi, aliquam, quaerat neque aliquid sint nemo minima sed voluptates, esse repellat. Tenetur cum beatae sint repellendus reiciendis maiores et! Labore natus unde consequatur eveniet voluptatum quasi rem. Nisi nulla accusamus dicta est fuga, minus vel rem eaque atque voluptatum eum corporis ad libero, quis ipsam ratione porro distinctio provident quo ab doloribus facilis voluptas harum! Libero ea optio illum laborum? Omnis tempore ratione sunt accusantium dolorum ex ipsam ab nisi ad vero nesciunt voluptates eius, laborum soluta perspiciatis commodi repellat doloremque deleniti pariatur, quos.</p>
            <h1>Necessitatibus veritatis, ipsa.</h1>
            <p>Earum tempore deserunt modi minus aliquam accusantium incidunt voluptate, excepturi dolores consectetur iste id suscipit, cupiditate, nesciunt natus culpa consequatur! Doloribus illo, quae tempora distinctio minima excepturi quidem perspiciatis delectus asperiores fuga labore ut inventore laudantium quam, blanditiis laboriosam autem veritatis, nulla. Quo reiciendis beatae facere delectus eius, ut, illum nesciunt saepe eveniet pariatur laboriosam debitis magnam aliquam. Repudiandae fugit incidunt quaerat esse neque molestiae, odio libero delectus totam quis a nisi facere deserunt consectetur ex? Asperiores ducimus voluptatum quod illum, deleniti aliquam mollitia voluptas soluta ea quo! Repudiandae repellendus sint ab incidunt odit perferendis dolores, voluptatibus illo quia mollitia?</p>
            <h1>Suscipit, commodi, nulla.</h1>
            <p>Tenetur minus rem doloribus reprehenderit illum voluptas odit ex eligendi nostrum consectetur aperiam quia odio omnis deserunt eos quam nihil quo inventore vitae quasi adipisci illo, fugit temporibus non. Sunt distinctio, modi aperiam! Quis hic nesciunt neque cumque aut modi nostrum libero voluptatum quidem officia praesentium illum, molestiae, facilis sit voluptates, porro exercitationem perspiciatis voluptatem eaque quod quibusdam sunt suscipit vel. Eveniet modi delectus tempora, ducimus ea beatae quisquam iure, dolores quo officia explicabo enim ipsam excepturi, incidunt dicta unde voluptas aliquid nesciunt, nam provident consequatur perspiciatis facere adipisci fuga! Recusandae, consequatur quisquam obcaecati id at alias doloremque quo. Quis!</p>
            <h1>Quibusdam, quidem cupiditate.</h1>
            <p>Aperiam ducimus error sed sequi voluptatum, nisi amet delectus praesentium laudantium velit eligendi doloribus sint quia tempora quod numquam iusto reiciendis repudiandae iste, sapiente excepturi illo. Amet dolorum accusantium placeat, et eaque. Ratione nulla impedit ab odit, iure amet. Quisquam totam architecto saepe, praesentium amet, unde delectus hic distinctio voluptates, placeat magnam incidunt iure. Iste, dignissimos error velit totam quae autem cupiditate rerum nam. Harum exercitationem corporis vel voluptatum! Alias ullam, dolorem qui nihil maxime facilis soluta modi deleniti similique ratione ad est debitis ea illo autem. Corrupti, maiores, quia. Magni eum voluptatem eligendi consectetur. Ullam est deserunt praesentium quos?</p>
            <h1>Ipsam, illum, soluta.</h1>
            <p>Doloribus eligendi, quibusdam similique cum magni ab voluptatibus consequatur, iusto corporis incidunt, laboriosam hic, neque fuga consequuntur. Vero ullam doloribus vitae perferendis impedit placeat quas, eum labore minima, expedita dolore, tempora dolorem magnam! Rem magni minima cupiditate maxime, totam minus quis, ab quas vitae expedita ex a quaerat asperiores reiciendis officia alias, perferendis omnis! Consectetur fuga velit placeat quam architecto inventore sunt adipisci animi nisi, fugit, debitis dolorum ea perspiciatis sint. Et minima culpa placeat laboriosam, ratione maiores cum, fugiat suscipit maxime iste blanditiis expedita earum nihil, distinctio eveniet. Quam, autem sequi quas quod laudantium tenetur perspiciatis vitae dignissimos velit.</p>
        </div>
    </div>
</div>

中心引导并排

2 个答案: