【问题标题】:Align Bootstrap panel to the Right将 Bootstrap 面板向右对齐
【发布时间】:2016-03-11 01:18:53
【问题描述】:

我想将右侧面板对齐到最后。我需要在 CSS 中添加一些东西吗?

<div class="row flex">

        <div class="col-md-5">
            <div class="panel panel-default panel-no-border">
                <div class="panel-body">

                    <p>
                        <strong>Smart XXXXX Europe Limited (XXXX Branch) </strong><br />
                        Address  <br>
                        Address  <br>
                        Address  <br>
                        Address  <br>
                        customer.relations@company.com<br>
                        www.comapny.com<br>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-5 col-md-offset-2 text-right">
            <div class="panel panel-default panel-no-border">
                @*<div class="panel-heading">
                        <h4>Mr. John Ryan</h4>
                    </div>*@
                <div class="panel-body">
                    <p>
                        <strong>Mr. John Ryan</strong><br />
                        36 Praed street <br>
                        XXXX, XXXXXX<br>
                        XXXXXX<br>
                    </p>
                </div>
            </div>
        </div>
    </div> 

CSS:

.flex, .flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 0 auto;
}

.panel {
   display: flex;
   flex-direction:column;
   align-content:stretch; 
}

.panel-body {
   display: flex;
   flex-grow:1;
}

【问题讨论】:

    标签: html css twitter-bootstrap-3 flexbox


    【解决方案1】:

    只需将justify-content: flex-end 添加到面板的父级:

    <div class="col-md-5 col-md-offset-2 text-right your-class">
    
    .your-class {
      justify-content: flex-end;
    }
    

    演示:http://www.bootply.com/dsg1qHNopH

    【讨论】:

      【解决方案2】:

      您必须包装 div,然后将 padding-right= 0px; 添加到第二个 div。

      working fiddle

      【讨论】:

        【解决方案3】:
        `https://jsfiddle.net/nzLsedob/`
        

        在这里查看 我希望这是你想要的答案。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2019-07-06
          • 2017-05-21
          • 2023-04-01
          • 2013-02-13
          • 2020-04-18
          • 2017-03-04
          • 1970-01-01
          相关资源
          最近更新 更多