Question

我的Web应用程序中有一个引导网格布局，我想将所有网格对齐在同一行上。例如，在全屏加载时，卡的外观如下：

但是，调整页面大小时，卡片显示如下

无论页面如何调整大小，我都需要使它们看起来像第一张图像，但不确定如何进行此操作。

下面是我的代码：

std::string EWUtils::emojiToStr(std::string str)
{
    std::ofstream(FileUtils::getInstance()->fullPathForFilename("text.txt")) << str;
    std::wifstream fin(FileUtils::getInstance()->fullPathForFilename("text.txt"));
    fin.imbue(std::locale("en_US.UTF-8"));

    std::string name;
    for (wchar_t c; fin >> c; )
    {
        __String* item = __String::createWithFormat("%x",c);
        name = name + item->_string + "-";
    }
    if (name.length() > 1) {
        name.pop_back();
    }
    return name;
}

Answer 1

在您的代码中，您使用的是 col-md-8 ，它的最小宽度为992px。您可以将 md 替换为 xs ，以便它适用于所有分辨率。

Answer 2

flex-basis

您只需要调整“ col” className，使其在任何断点处始终为8和4。

Answer 3

对于所有视图（xs，sm，md），只要容器的总宽度为8，就可以将网格划分为5 x 3。

媒体查询断点：grid-media-queries

示例如下

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
     <div class="d-flex col-md-8">
      <div class="" style="background-color: 'white', border-radius: 5, border: '1px solid #EAE8E8'">
        <div class="row">
          <div class="d-flex col-xs-5 col-sm-5 col-md-5">
            <div class="row" style="padding-top: 20, padding-bottom: 20, padding-left: 40">
              <h4>
                <b> restaurant name</b>&nbsp;
                
                  <div key=1><span class="badge-sm badge-secondary" style="color: 'white', background-color: '#DA9550', font-size: 9">dietaryRestriction</span>&nbsp;&nbsp;&nbsp;</div>
               
              </h4>
                 restaurant description
              <br /><br />
             <span class="munchtime pointer"><i class="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
                <b><s>$2000</s></b> <span class="discount"><b>20%</b></span>
              </div>
            </div>
            <div class="d-flex col-xs-3 col-sm-3 col-md-3">
                <img src='https://picsum.photos/200/300
' style="width: '100%', height: 250, objectFit: 'cover'" />
            </div>
        </div>
      </div>
    </div>

水平对齐项目自举

3 个答案: