Html 使用引导卡中的Div标记创建正确的CSS列

输出：

我希望按钮是完全可见的，按钮的大小似乎很小，希望它适合文本。我怎样才能解决这个问题

**更新1**：

更新的CSS：

  .myrow {
 display :flex;
 width : 100%;
  }

  .col-1 {
       float : left;
      width : 40% !important;

  }
.col-2 {
    float : left;
    width : 60% !important;

  }
  * {
      box-sizing: border-box;
  }

---

修正了使用修改的列名，而不是在注释中使用float和flex。第一部分显示错误，因为css直接修改引导程序的列，但重命名列后更精确，问题得到了解决

像更改HTML一样更改并删除自定义css

   .myrow {
 display :flex;
 width : 100%;
  }

  .col-1my {

      width : 40% !important;

  }
.col-2my {

    width : 60% !important;

  }
  * {
      box-sizing: border-box;
  }

---

如果您使用的是引导，为什么要使用自己的行和列类？还有，为什么要将float与flex一起使用？最后，我不会使用col-1和col-2，因为您正在覆盖引导col-1和col-2类使用引导的输入组pi从引导复制了卡片模板，但希望在其中添加一个进度条！所以我试着把它并排对齐！

   .myrow {
 display :flex;
 width : 100%;
  }

  .col-1my {

      width : 40% !important;

  }
.col-2my {

    width : 60% !important;

  }
  * {
      box-sizing: border-box;
  }

  <div class="card mb-4">
    <img class="card-img-top" src="https://ichef.bbci.co.uk/news/660/cpsprodpb/948D/production/_109592083_mediaitem109591445.jpg" alt="Card image cap">
    <div class="card-body">
        <h2 class="card-title">Funding For Bulbul</h2>
        <p class="card-text">
            The authorities in Bangladesh have ordered the evacuation of some 100,000 people from coastal areas as Cyclone Bulbul is set to hit the country.

            The storm - which is due to make landfall on Saturday evening local time - is expected to unleash surges as high as 7ft (two metres).
        </p>
        <div class="d-flex align-items-center"><!-- Changes HERE -->
            <div class=""><!-- Changes HERE -->
                <a href="#" class="btn btn-primary">Read More &rarr;</a>
            </div>
            <!--Progress Bar-->
            <div class="flex-fill"><!-- Changes HERE -->
                <div class="container">

                    <div class="progress">
                        <div class="progress-bar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer text-muted">
        Posted on November 9 , 2019 by
        <a href="https://www.bbc.com/bengali">BBC Bangladesh</a>
    </div>
</div>