การกำหนดสไตล์ modal-title ใน bootstrap v4

ฉันกำลังพยายามจัดสไตล์เนื้อหาของชื่อกิริยา โดยจะมีรูปภาพตรงกลาง และคอลัมน์เล็กๆ สองคอลัมน์ที่มีปุ่ม/รูปภาพ 1 หรือ 2 ปุ่ม ฉันต้องการให้ทุกอย่างจัดเรียงในแนวตั้งและแนวนอน ขนาดของภาพตรงกลางจะแตกต่างกันไป ดูเหมือนว่าจะเป็นงานของ flexbox ในโค้ดจริงของฉัน เนื้อหาของ #headerLHS/#headerRHS/#myModalLabel ถูกตั้งค่าแบบไดนามิก

    <div class="modal-title row" id="headerBox" class="container-fluid">
      <div id="headerLHS" class="col-xs-3"><img id="lhs"/></div>
      <div id="myModalLabel" class="col-xs-6"></div>
      <div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div>
    </div>

จนถึงตอนนี้ css ของฉันคือ:

#headerLHS,#headerRHS {
    display: flex;    webkit-display: flex;
    -webkit-flex-direction: column;  /* Safari */
    flex-direction:  column;
    padding: 0px;
    justify-content: space-around;
    align-items: center;
}

แต่นี่ไม่ได้ผล ดูเหมือนฉันจะต้องจัดสไตล์บน #lhs และ #rhs แต่ฉันไม่รู้ว่ามันควรจะเป็นอย่างไร ฉันเคยเล่นกับมาร์กอัป flex-box ทุกประเภท แต่ก็ไม่มีประโยชน์ ใครสามารถช่วยได้

ขอบคุณ.


flexbox bootstrap-4
person LenB    schedule 29.03.2016    source แหล่งที่มา

คำตอบ (1)


arrow_upward
0
arrow_downward

คุณไม่มีคอลัมน์ที่มีความสูงเท่ากัน คุณควรใช้ flexbox บนพาเรนต์ด้วยและตั้งค่า `flex-wrap: wrap;

#headerBox
{
    display:flex;
    webkit-display: flex;
    flex-wrap: wrap;
    webkit-flex-wrap: wrap;
} 
#headerLHS,#headerRHS {
    display: flex;    
    webkit-display: flex;
    -webkit-flex-direction: column;  /* Safari */
    flex-direction:  column;
    padding: 0px;
    justify-content: center;
    align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-title row" id="headerBox" class="container-fluid" style="display:flex;flex-wrap: wrap;">
      <div id="headerLHS" class="col-xs-3"><button id="rhs">label</button></div>
      <div id="myModalLabel" class="col-xs-6"><img id="lhs" src="http://dummyimage.com/640x4:3" class="img-fluid"/></div>
      <div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div>
</div>

`

person Bass Jobsen    schedule 31.03.2016