Question

我想在同一行中显示这两个div。

这是我的HTML代码：

<div class="row">
   <div class="col p-0 dossier-detail-btn" style="text-align: right;">
      <div style="display: inline-flex;width:100%">
         <button class="demo-button excercice-create-btn mdc-button font-Roboto-Medium mdc-button--raised mdc-ripple-upgraded" style="box-shadow: none;color: #0047FD;text-align:left;border: rgba(0, 0, 0, 0.3) 1px solid;background-color: white;margin: 0 10px;border-radius: 4px;" data-DebutActivite="@(doss.DateDebutActivite.Value.ToString("dd/MM/yyyy"))" data-item="@(TnsHelper.Crypt (doss.Id.ToString ()))">
         CR&Eacute;ER UN EXERCICE
         </button>
      </div>
      <div style="display: inline-flex;">
         <div class="col-auto">
            <span style="vertical-align: middle;line-height: 1;font-size: 14px;color: rgba(0,0,0,0.6);font-family: roboto-medium;" onclick="checkSupprimerDossier('@(Url.Action("Delete", "Dossier"))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">SUPPRIMER</span>
         </div>
         <div class="col-auto">
            <span style="vertical-align: middle;line-height: 1;font-size: 14px;color: rgba(0,0,0,0.6);font-family: roboto-medium;" onclick="checkDupliquerDossier ('@(Url.Action("Dupliquer", "Dossier", new { idDossier = TnsHelper.Crypt (doss.Id.ToString ()) }))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">DUPLIQUER</span>
         </div>
         <button class="demo-button mdc-button mdc-button--raised mdc-ripple-upgraded" style="background-color:#0047FD !important;margin: 0 10px;border-radius: 4px;" onclick="checkOpenDossier ('@(Url.Action("Index2", "Exercice", new { idDossier = TnsHelper.Crypt (doss.Id.ToString ()) }))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">
         OUVRIR LE DOSSIER
         </button>
      </div>
      <div>
      </div>
   </div>
</div>

Answer 1

因此，我确实去除了内联样式和非自举类，但是这里有一个示例，说明如何完成您所追求的目标。如果我可以提供任何建议，那就是要养成摆脱使用类似引导程序之类的框架的习惯。阅读the documentation，您将很快了解到仅通过学习使用方法即可节省多少精力和多余的膨胀。

无论哪种方式，希望对您有帮助，并祝您节日快乐！

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col p-0">
    
      <button 
        data-DebutActivite="@(doss.DateDebutActivite.Value.ToString("dd/MM/yyyy"))"
        data-item="@(TnsHelper.Crypt (doss.Id.ToString ()))">
         CR&Eacute;ER UN EXERCICE
      </button>
    
    </div>
    <div class="col-auto">
    
      <span onclick="checkSupprimerDossier('@(Url.Action("Delete", "Dossier"))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">
      SUPPRIMER
      </span>
      
    </div>
    <div class="col-auto">
    
      <span onclick="checkDupliquerDossier ('@(Url.Action("Dupliquer", "Dossier", new { idDossier = TnsHelper.Crypt (doss.Id.ToString ()) }))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">
        DUPLIQUER
      </span>
    
    </div>
    <div class="col-auto p-0">
    
      <button 
        onclick="checkOpenDossier ('@(Url.Action("Index2", "Exercice", new { idDossier = TnsHelper.Crypt (doss.Id.ToString ()) }))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">
         OUVRIR LE DOSSIER
      </button>
      
    </div>
  </div>
</div>

在同一行或同一行中显示两个div

1 个答案: