пользовательский бутстрап вложенные coloumns выравнивание

Im пытается выровнять 3 coloumns под встроенным видео. Я хочу, чтобы края coloumns совпадали с краями видео. Я думаю, что мне нужно, чтобы coloumns были вложены, но я не уверен. Это то, что у меня есть до сих пор, как правильно настроить его? Мне нужно, чтобы coloumns реагировали на видео.пользовательский бутстрап вложенные coloumns выравнивание

https://jsfiddle.net/415w8ww8/

<div class="row"> 
    <div class="col-md-12"> 
    <div class="embed-responsive embed-responsive-16by9 video-wrapper center-block "> 
     <iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=b6hoBp7Hk-A"></iframe> 
    </div> 
    <div class="row"> 
     <div class="col-md-3 col-lg-offset-2"> 
     <h3 class="text-left">Record</h3> 
     <p class="text-left">e 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into </p> 
     </div> 
     <div class="col-md-3"> 
     <h3 class="text-left">Integrate</h3> 
     <p class="text-left"> 
      electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p> 
     </div> 
     <div class="col-md-2"> 
     <h3 class="text-left">Share</h3> 
     <p class="text-left">electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p> 
     </div> 
    </div>

CSS

@media all and (min-width: 560px) { 
    .video-wrapper { 
     width:797px; 
     padding-bottom:444px !important; 
    } 
}

источник

2015-12-16 caffeinescript

Вы можете установить вложенную row ширину, чтобы соответствовать video-wrapper ширине.

См. Фрагмент на полной странице.

@media all and (min-width: 560px) { 
 
    .video-wrapper { 
 
    max-width: 797px; 
 
    border: 3px solid red; 
 
    } 
 
    .row.row-small { 
 
    max-width: 797px; 
 
    margin: 0 auto; 
 
    border: 3px solid red; 
 
    } 
 
} 
 
/*BORDER IS FOR DEMO ONLY*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="embed-responsive embed-responsive-16by9 video-wrapper center-block"> 
 
     <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/cx2lJIOTBjs?controls=0&amp;showinfo=0"></iframe> 
 
     </div> 
 
     <div class="row row-small"> 
 
     <div class="col-md-4"> 
 
      <h3 class="text-left">Record</h3> 
 
      <p class="text-left">e 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into</p> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <h3 class="text-left">Integrate</h3> 
 
      <p class="text-left"> 
 
      electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <h3 class="text-left">Share</h3> 
 
      <p class="text-left">electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2015-12-16 04:25:01 vanburen

, которая работала прекрасно, спасибо :) – caffeinescript

включает Нормализацию и Bootstrap:

Live Preview in Codepen

Вы должны настроить высоту видео:

Это Возможное со следующим кодом:

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Video and Columns with bootstrap</title> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 

 
    <!--Main content container--> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <iframe width="100%" height="315" src="https://www.youtube.com/embed/b6hoBp7Hk-A" frameborder="0"></iframe> 
 
     </div> 
 
    </div> 
 

 
    <!-- Three columns --> 
 

 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <h3>Record</h3> 
 
     <p>e 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into</p> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <h3>Integrate</h3> 
 
     <p>electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop.</p> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <h3>Hiya!</h3> 
 
     <p>electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop.</p> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

источник

2015-12-16 04:27:36 AlejandroJSR7

пользовательский бутстрап вложенные coloumns выравнивание

ответ

Смежные вопросы