2016-03-10 4 views
0

Я хочу выровнять правую панель до конца. Нужно ли добавлять что-то в 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> 
         [email protected]<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; 
} 

ответ

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

1

Вы должны обернуть дивы, а затем добавить padding-right= 0px; ко второму дел.

см working fiddle

1
`https://jsfiddle.net/nzLsedob/` 

чек здесь Я надеюсь, что это ответ, который вы хотите.