Question

如何在引导网格系统中排列内容而不必为所有内容创建单独的行？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
       <div class="row">
          <div class="col-sm-3">
               <h1>Some Content</h1>
               <p>More content</p>
               <button>Submit</button>
          </div>
          <div class="col-sm-3">
               <h1>Some Content</h1>
               <p>More content</p>
               <p>More content</p>
               <button>Submit</button>
          </div>
          <div class="col-sm-3">
               <h1>Some Content</h1>
               <p>More content</p>
               <p>More content</p>
               <p>More content</p>
               <p>More content</p>
               <p>More content</p>
               <p>More content</p>
               <button>Submit</button>
          </div>
       </div>
    </div>

段落中的部分内容比其他内容长，按钮不均匀

col-1    col-2    col-3
header   header   header
parag    parag    parag
button   parag    parag
         button   parag
                  button

如何将按钮，段落全部排成一行。我在段落上使用了最大宽度。

Answer 1

只需添加另一行即可

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
   <div class="row">
      <div class="col-sm-3">
           <h1>Some Content</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="col-sm-3">
           <h1>Some Content</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="col-sm-3">
           <h1>Some Content</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
      </div>
   </div>
   <div class="row">
      <div class="col-sm-3">
          <button>Submit</button>
      </div>
      <div class="col-sm-3">
          <button>Submit</button>
      </div>
      <div class="col-sm-3">
          <button>Submit</button>
      </div>
   </div>
</div>

＆＃13;

Answer 2

如果您不想添加其他行，则可以在每列上使用flexbox，然后将margin-top: auto添加到button。

以下是一个示例：https://codepen.io/apieceofbart/pen/xpLPRd

在引导网格中排列内容

2 个答案: