Bootstrap 4-将行拆分为两列

zc0qhyus 于 2023-03-21 发布在 Bootstrap

关注(0)|答案(5)|浏览(153)

我需要将一行拆分为两行，以便在一行中容纳两个标题，如下所示：

使用我编写的当前代码，我无法像上面那样将行分成两行，也无法像下面那样保持响应性：

下面是我使用当前代码得到的输出：

下面是代码：

<div class="container-fluid mail-body" style="width: 740px;">
<div id="account" class="row your-account">
  <div class="col text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
    Your Account
  </div>
</div>
<!-- /.your-account -->

<div id="logo" class="row">
  <div class="col text-center" style="background-color:#0471AF; height:100px; display: flex; justify-content: center;">
    LOGO
  </div>
</div>
<!-- /.logo -->

<div id="order-text" class="row">
  <div class="col text-center" style="min-height: 98px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:36px; color: #0471AF; font-weight:100; display: flex; justify-content: center;">
    <span style="align-self: center;">Heading Text</span>
  </div>
</div>
<!-- /.order-text -->

<div class="row">
  <div id="left-side-text" class="col-md-8 col-sm-12" style=" line-height: 18px;">
    <span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; line-height: 18px; font-weight:100;">
      Dear XYZ,
    </span>
    <br>
    <br>
    <span style="font-family:Helvetica, Arial, sans-serif; font-size:17px; text-decoration: none; text-align:left;  padding-bottom:20px;">Good news! Your order is confirmed.</span>
    <br>
    <br>
    <span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
      Some other text
    </span>
  </div>
  <!-- /.left-side text -->

  <div id="order-information" class="col-md-4 col-sm-12 order-2">
    <div class="col" style="height: 43px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:16px; color: #333333; text-decoration: none; font-weight:700; background: #f2f2f2; padding: 10px; border: 1px solid #999999; border-bottom: none;">
      Order Details
    </div>
    <div class="col" style="font-family:Helvetica, Arial, sans-serif; font-size:12px; color: #333333; padding: 10px; height: 73px; border: 1px solid #999999; border-top: none;">
      <table>
        <tr>
          <td class="col-2 font-weight-bold" style="padding-bottom: 10px; padding-left: 0">Order Date:</td>
          <td class="col-2" style="padding-bottom: 10px; padding-left: 0">03/06/2016</td>
        </tr>
        <tr>
          <td class="col-2  font-weight-bold" style="padding: 0px;">Order #:</td>
          <td class="col-2" style="padding-bottom: 10px; padding-left: 0">123456789</td>
        </tr>
      </table>
    </div>
  </div>
  <!-- /.order-information -->

  <div class="col-md-11 col-sm-12" style="line-height: 18px; vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
        <br>
        <br>Text1
        <br>
        <br> Text
        <br> Text
      </div>

</div>

<div id="confirmation-email" class="row order-1">
  <div class="col-md-11 col-sm-12" style="line-height: 18px; vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
    <br>
    <br>Text1
    <br>
    <br> Text
    <br> Text
  </div>
</div>

<div class="row">
  <div class="col-md-12" >
    <div class="col" style="height: 36px; vertical-align:middle; font-size: 12px; font-family:Helvetica, Arial, sans-serif;  color: #333333; text-decoration: none; font-weight:700; background: #f2f2f2; padding: 10px; border: 1px solid #999999; border-bottom: none;">
      <span class="">Product(s) Ready for Pickup</span>
      <span class="text-right">Quantity</span>

    </div>
  </div>
</div>

请帮助我正确设置html以及引导类，以达到预期的效果。谢谢！

twitter-bootstrap

来源：https://stackoverflow.com/questions/47131951/bootstrap4-splitting-the-row-into-two-columns

5条答案

按热度按时间

tzdcorbm1#

这里是超级简单/干净的代码：

<div class="row">        
    <div class="col" >
      Product(s) Ready for Pickup
    </div>
    <div class="col text-right" >
      Quantity
    </div>           
</div>

查看预览链接：https://codepen.io/ziruhel/pen/LOZjWZ

赞(0）回复(0）举报 2023-03-21

laawzig22#

您需要使用col-sm-6（或根据设备需要的相关类）在您的行中创建两列。假设您需要为小型、中型、大型设备创建2列，为超小型设备创建1列，以下是我的建议（注意：为了更好的可读性，我删除了样式规则）。

<div class="row col-md-12">        
    <div class="col-xs-12 col-sm-6" >
      <span class="float-left">Product(s) Ready for Pickup</span>
    </div>
    <div class="col-xs-12 col-sm-6" >
      <span class="float-right">Quantity</span>
    </div>           
</div>

赞(0）回复(0）举报 2023-03-21

ycl3bljg3#

使用col-xl-{value}获取列。引导网格http://getbootstrap.com/docs/4.0/layout/grid/

<div class="row">   //row

    <div class="col-xs-6" >  //column 1 for extra large screen, use sm for small, md for medium screen
      <span>Product(s) Ready for Pickup</span>
    </div>

    <div class="col-xs-6" > //column 2
      <span>Quantity</span>
     </div>    

 </div>

赞(0）回复(0）举报 2023-03-21

d8tt03nd4#

您可以使用col-md-*class for parentrow类中的子元素来根据需要拆分列。

<div class="row">        
  <div class="col-md-9" >
    Product(s) Ready for Pickup
  </div>
  <div class="col-md-3 text-center" >
    Quantity
  </div>           
</div>

赞(0）回复(0）举报 2023-03-21

a0zr77ik5#

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <form action="/action_page.php">
    <div class="row">
      <div class="col-xs-12 col-sm-2">
        <label for="fname">First Name</label>
      </div>
      <div class="col-xs-12 col-sm-4">
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
      </div>
       <div class="col-xs-12 col-sm-2">
        <label for="lname">Last Name</label>
      </div>
      <div class="col-xs-12 col-sm-4">
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      </div>    
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-2">
        <label for="country">Country</label>
      </div>
      <div class="col-xs-12 col-sm-4">
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
      </div>
            <div class="col-xs-12 col-sm-2">
        <label for="subject">Subject</label>
      </div>
      <div class="col-xs-12 col-sm-4">
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:auto"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-2">
        <label for="country">Country</label>
      </div>
      <div class="col-xs-12 col-sm-4">
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
      </div>
            <div class="col-xs-12 col-sm-2">
        <label for="subject">Subject</label>
      </div>
      <div class="col-xs-12 col-sm-4">
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:auto"></textarea>
      </div>
    </div>
    
  </form>
</div>

这会有所帮助

赞(0）回复(0）举报 2023-03-21

我来回答

Bootstrap 4-将行拆分为两列

5条答案

相关问题

热门标签

最新问答