Question

我把一个简单的网格放在一起，我希望左边的照片有一个200px的固定宽度，但正确的内容是流畅的。我使用bootstrap 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

注意：这是使用Bootstrap 4 beta。您正在使用BS alpha 2.使用alpha 6或beta

＆＃13;

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

＆＃13;

<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>

＆＃13;

试试这个

<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>

如果您需要在alpha 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>

另一个版本

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

该示例使用 Bootstrap 4 beta 2 。

Answer 4

所以我发现bootstrap 4中的实用程序类做了我正在寻找的技巧。任何试图通过bootstrap 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;
}

Bootstrap 4固定宽度和流体

4 个答案: