부트 스트랩 4 고정 너비와 유체

Question

왼쪽에있는 사진의 너비가 200px로 고정되어 있지만 유체의 양이 적당하도록 간단한 격자를 만들어 놓았습니다. 나는 부트 스트랩 4

https://jsfiddle.net/chapster11/oryq1k9t/1/

<div class="container-fluid"> 
    <div class="row"> 
    <div class="photo"> 
     <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail"/> 
    </div> 
    <div class="col-sm-12"> 
     <div class='title'>MY Title</div> 
     <div class="description">Description text example</div> 
    </div> 
    </div> 
</div> 

Answer 1

당신이 오른쪽에있는 이미지를 두어 의미 했을 사용하고 있습니다? 단지 this?

처럼 그냥 align:right .fyi

Answer 2

NB 추가 :이 부트 스트랩 4 베타를 사용하고 있습니다. 당신은

는 시도 중 하나는 알파 6 베타

img{ 
 
    width: 200px; 
 
    border:1px solid green; 
 
} 
 

 
.photo{ 
 
    border:1px solid red; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 

 
    <div class="container-fluid"> 
 
     <div class="row no-gutters"> 
 
     <div class="col-auto"> 
 
      <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail photo"/> 
 
     </div> 
 
     <div class="col bg-dark text-light"> 
 
      <div class='title'>MY Title</div> 
 
      <div class="description">Description text example</div> 
 
     </div> 
 
     </div> 
 
</div>

를 사용하는 BS 알파 2를 사용하는이

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-6 photo"> 
     <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail"/> 
    </div> 
    <div class="col-6"> 
     <div class='title'>MY Title</div> 
     <div class="description">Description text example</div> 
    </div> 
    </div> 

당신이 알파 2에서 작업해야 할 경우, col-xs-* 클래스를 사용하십시오. 아래 코드를 참조하십시오.

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-6 photo"> 
     <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail"/> 
    </div> 
    <div class="col-xs-6"> 
     <div class='title'>MY Title</div> 
     <div class="description">Description text example</div> 
    </div> 
    </div> 

또 다른 버전

img{ 
 
    width: 200px; 
 
    border:1px solid green; 
 
    float:left; 
 
    margin:20px; 
 
} 
 

 
.photo{ 
 
    border:1px solid red; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 

 
    <div class="container-fluid"> 
 
      <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail photo"/> 
 
      <div class='title'>MY Title</div> 
 
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur suscipit elit purus, in aliquam elit auctor in. Proin vitae purus sit amet massa ullamcorper sodales. Fusce sed magna sollicitudin, tincidunt nulla non, sodales purus. Vivamus pulvinar semper magna. Etiam finibus vel tellus malesuada bibendum. Donec iaculis libero quis neque condimentum elementum. Phasellus vestibulum, quam sed feugiat ullamcorper, augue massa sodales eros, quis porta mauris urna eu nisi. Pellentesque mattis ante mauris, eget sodales eros facilisis et. Aliquam tristique scelerisque mauris, at finibus urna rhoncus id. Integer euismod nunc quis arcu consectetur, nec mattis nunc sagittis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
 

 
Sed sed sollicitudin felis. Fusce vitae risus dui. Morbi pulvinar sollicitudin nisl non pulvinar. Proin non nunc fermentum, elementum mi at, cursus nisl. In non felis id mi fringilla tincidunt. Sed ullamcorper rutrum consectetur. Nunc volutpat scelerisque nulla in blandit. Quisque auctor sagittis tellus a auctor. Vivamus malesuada pellentesque lorem eu sollicitudin. Maecenas tristique nisi fringilla eros scelerisque, porta faucibus nibh ornare. Morbi ultricies orci et ex tincidunt bibendum. Nullam congue tempus elit, faucibus rutrum libero consequat quis. In luctus mattis fringilla. Maecenas convallis id magna ut tempus. Donec sollicitudin fringilla diam, et placerat magna feugiat et.</div> 
 
</div>

Answer 3

당신은 사진 col에만 필요합니다 사용하십시오 공간을 확보하기 위해 이것을 사용할 수 있습니다.

는

.search-thumbnail{ 
 
    width: 200px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-auto"> 
 
     <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail"/> 
 
    </div> 
 
    <div class="col"> 
 
     <div class='title'>MY Title</div> 
 
     <div class="description">Description text example</div> 
 
    </div> 
 
    </div> 
 
</div>

예는 부트 스트랩 4 베타 2를 사용한다.

Answer 4

그래서 부트 스트랩 4에서 유틸리티 클래스를 찾았습니다. 내가 찾고있는 트릭이었습니다. 누군가가 부트 스트랩과이를 달성하기 위해 노력에 대한 바이올린 예 4.

https://jsfiddle.net/chapster11/8p8s3hy5/

HTML

<div class="d-flex"> 
    <div class="photo"> 
      <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail"/> 
    </div> 
    <div class="info ml-sm-3"> 
    Balint Zsak Someone’s Knocking at My Door 01.12.13 
    </div> 
</div> 

CSS

.photo{ 
    width: 200px; 
    flex: 0 0 200px; 
} 
.photo img{ 
    max-width: 100%; 
} 
.info{ 
    border:1px solid blue; 
    flex:0 1 auto; 
}