סדר בbootstrap עם Left

הפצת אנקי

יש לי סרגל כזה:

כדי לגרום למצב שבמסך קטן הפריטים ירדו שורה במקום להיעלם אני משתמש בbootstrap במחלקה row

הבעיה בזה היא שתיבת החיפוש צריכה תמיד להיות צמודה לשמאל ולכן אני משתמש בה בleft. רק שזה גורם שהכפתורים האחרים יעלו עליה כמו בתמונה למעלה.
זה פחות או יותר הקוד שאחראי על הסרגל הזה:

<div class='row align-items-center col full mobile-nav reviewerbardisp'>

    <div class="row row-4" href=# onclick='pycmd("menuCol")'>
        <div class="row row-4 mobile-nav-item statscursor">                       
           <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#fff">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
        תפריט
               <span class="tooltiptext tooltip-bar">תפריט "קובץ"</span>
</div>
    </div>
|
    <div class="row row-4" href=# onclick='pycmd("deckBrowser")'>
        <div class="row row-4 mobile-nav-item statscursor">                       
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
         מסך ראשי <span class="tooltiptext tooltip-bar">עבור למסך הראשי</span> </div>
    </div>
|
    <div class="row row-4" href=# onclick='pycmd("add_deck")'>
        <div class="row row-4 mobile-nav-item statscursor">                       
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF">
            <path d="M0 0h24v24H0V0z" fill="none"/>
            <path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z"/>
            </svg>
         צור חפיסה <span class="tooltiptext tooltip-bar">צור נושא כדי לסדר את השאלות שתוסיף</span> </div>
    </div>
|
    <div class="row row-4" href=# onclick='pycmd("AddCard")'>
        <div class="row row-4 mobile-nav-item statscursor">                       
         <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF">
<rect fill="none" height="24" width="24"/>
<path d="M3,10h11v2H3V10z M3,8h11V6H3V8z M3,16h7v-2H3V16z M18.01,12.87l0.71-0.71c0.39-0.39,1.02-0.39,1.41,0l0.71,0.71 c0.39,0.39,0.39,1.02,0,1.41l-0.71,0.71L18.01,12.87z M17.3,13.58l-5.3,5.3V21h2.12l5.3-5.3L17.3,13.58z"/>
</svg>
         כתוב שאלה <span class="tooltiptext tooltip-bar">הוסף שאלה ותשובה</span> </div>
    </div>
|
    <div class="row row-4" href=# onclick='pycmd("onBrowse")'>
        <div class="row row-4 mobile-nav-item statscursor">                       
           <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#fff">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
         דפדף בכרטיסים <span class="tooltiptext tooltip-bar">פתח את חלון דפדוף בכרטיסים</span> </div>
    </div>
|
    <div class="row row-4" href=# onclick='pycmd("FilteredDialog")'>
        <div class="row row-4 mobile-nav-item statscursor">                       
           <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF">
<g><path d="M0,0h24 M24,24H0" fill="none"/>
<path d="M7,6h10l-5.01,6.3L7,6z M4.25,5.61C6.27,8.2,10,13,10,13v6c0,0.55,0.45,1,1,1h2c0.55,0,1-0.45,1-1v-6 c0,0,3.72-4.8,5.74-7.39C20.25,4.95,19.78,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/>
<path d="M0,0h24v24H0V0z" fill="none"/></g>
</svg>
         סנן שאלות <span class="tooltiptext tooltip-bar">צור חפיסה עם שאלות מסוננות לפי הגדרה מסוימת</span> </div>
    </div>
|
    <div class="row row-4" href=# onclick='pycmd("Stats")'>
        <div class="row row-4 mobile-nav-item statscursor">                       
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M5 9.2h3V19H5V9.2zM10.6 5h2.8v14h-2.8V5zm5.6 8H19v6h-2.8v-6z"/>
</svg>
         הצג סטטיסטיקות <span class="tooltiptext tooltip-bar">פתח את חלון הסטטיסטיקות</span> </div>
    </div>
|
    <div class="row row-4" href=# onclick='pycmd("menu_Help")'>
        <div class="row row-4 mobile-nav-item statscursor">                       
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
</svg>
         עזרה <span class="tooltiptext tooltip-bar">תפריט "עזרה"</span> </div>
    </div>
	""" + """
<input id="searchcards" type="text" style="background:transparent; border-radius: 20px; color:#fff;" 
	placeholder="חיפוש כרטיסים..."  value="" class=" searchcards reviewerbardisp row row-4 " size="20"
	 style="direction: rtl; text-align: right;">
<script>
var input = document.getElementById("searchcards");
input.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    event.preventDefault();
    pycmd("browser_search:" + this.value)
    this.value = ""
  }
});

</script>

</div>

והCSS:

element.style {
    background: transparent;
    border-radius: 20px;
    color: #fff;
}
body.reduce-motion, body.reduce-motion *:not(.no-reduce-motion) {
    transition: none !important;
    animation: none !important;
}
.searchcards {
    position: absolute;
    margin-left: 10px;
    left: 0;
}
.row {
    margin: 0;
}
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
button, input {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
*, ::after, ::before {
    box-sizing: border-box;
}
* {
    box-sizing: content-box;
}
user agent stylesheet
input[type="text" i] {
    padding: 1px 2px;
}

dovid

@הפצת-אנקי אתה מבין מה שהבאת, או שאתה מגשש באפילה/שואל בשם מישהו?
בפורום תכנות אמורים לשאל כמתכנת ולא כ"נא לעזור לי לפתור את הבעיה".
בגומלין אתה יכול לשאול איך שבא לך אבל גם שם להיות שקוף.

dovid

אחרי שנרגעתי יותר, אני יכול לענות.
לא משתמשים במקרה כזה בrow אלא בd-flex.
לא ציינת איזה גירסת בוטסטרפ מדובר, לכן אענה גם בcss טהור שתבין את הרעיון:
א. הפריטים כולם בתוך flex (כאמור עושים זאת בבוטסטרפ ע"י d-flex)
ב. הפריט האחרון הוא החיפוש, צריך להגדיר אותו על שוליים ימניים אוטומטי (בבוטסרטפ עושים זאת ע"י ms-auto או mr-auto).
הנה הדגמה:
https://codepen.io/dlt/pen/BaGLPpV?editors=1100
והנה בבוטסטרפ 5:
https://codepen.io/dlt/pen/vYQXaxJ?editors=1000

הפצת אנקי

תודה על המ"מ. נס שנרגעת ....

תחומים - פורום חרדי מקצועי

סדר בbootstrap עם Left