एक ही पंक्ति या पंक्ति में दो div प्रदर्शित करें

Question 1

मैं इन दोनों div को एक ही पंक्ति में प्रदर्शित करना चाहता हूं।

यहां मेरा एचटीएमएल कोड है:

<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>

html css

0

mecabpazzo95 21 नवम्बर 2018, 18:29

Answer

तो मैंने इनलाइन शैलियों और गैर बूटस्ट्रैप कक्षाओं को हटा दिया, लेकिन यहां एक उदाहरण दिया गया है कि आप जो कर रहे हैं उसे कैसे पूरा किया जाए। अगर मैं कोई सलाह दे सकता हूं, तो बूटस्ट्रैप जैसे ढांचे के आसपास काम करने की आदत को छोड़ने पर काम करना है। पढ़ें दस्तावेज़ीकरण और आप तुरंत देखेंगे कि कितना प्रयास और ब्लोट की अतिरिक्त लाइनें आप इसका उपयोग करना सीखकर ही बचत कर सकते हैं।

किसी भी तरह से, आशा है कि यह मदद करता है और खुश छुट्टियाँ!

<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>

2

Chris W. 21 नवम्बर 2018, 23:54

Question 2

तो मैंने इनलाइन शैलियों और गैर बूटस्ट्रैप कक्षाओं को हटा दिया, लेकिन यहां एक उदाहरण दिया गया है कि आप जो कर रहे हैं उसे कैसे पूरा किया जाए। अगर मैं कोई सलाह दे सकता हूं, तो बूटस्ट्रैप जैसे ढांचे के आसपास काम करने की आदत को छोड़ने पर काम करना है। पढ़ें दस्तावेज़ीकरण और आप तुरंत देखेंगे कि कितना प्रयास और ब्लोट की अतिरिक्त लाइनें आप इसका उपयोग करना सीखकर ही बचत कर सकते हैं।

किसी भी तरह से, आशा है कि यह मदद करता है और खुश छुट्टियाँ!

<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>

2

Chris W. 21 नवम्बर 2018, 23:54

एक ही पंक्ति या पंक्ति में दो div प्रदर्शित करें

1 उत्तर

संबंधित सवाल

नए सवाल