Question

我正在尝试实现列表/网格切换。我有网格，我想切换到列表，所以我想在左侧显示图像，在右侧显示内容。

HTML代码：

<div class="card infinite-item">
  <div class="img-dimension">
    <img class="card-img-top" src="/media/category/img.jpeg" alt="Card image cap">
  </div>
  <div class="card-body">
    <h5 class="card-title">idea 01</h5>
    <div class="card-text">        
          <p>Phasellus a est. Nam eget dui. Pellentesque ut neque. Nunc sed turpis. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi.</p>        
    </div>
    <div class="text-left pb-2 pt-2">
        <a id="idea_detail_1" href="/idea/1/">Details...</a>
    </div>
    <div class="text-right card-icons">
      <span class="badge badge-secondary">Discussion</span>
      <a class="like badge">
        like button        
      </a>
      <a class="dislike badge">
        dislike button
      </a>
      <a href="#" class="badge comments">
        comments
      </a>
    </div>
  </div> 
  <div class="card-footer">
    footer
  </div>
</div>

我没有更改CSS，所以它是引导程序的默认CSS代码：

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card-img-top {
    width: 100%;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card-title {
    margin-bottom: .75rem;
}

Answer 1

<input id="name" name="name" required type="text" value="test value">

您可以将.card { display: flex; flex-direction: row; align-items: center; /* optional */ }更改为flex-direction: column以解决您的问题。

Answer 2

//Deparure date
window.Parsley.addValidator('departure_date', {
  validateString: function (value) {
            var now = new Date();
            var date = new Date(value);
            return date < now;
        }
  messages: {
    en: 'Please insert tomorrow or anydate in the future'
  }
});

//Return date
window.Parsley.addValidator('return_date', {
  validateString: function (value) {
            var now = new Date();
            var date = new Date(value);
            return date < now;
  },
  messages: {
    en: 'Your return date should be 3 days or more after departure date'
  }
});

}

.card-img-top {
width: 100%;
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
position: relative;
left: 0;
display: inline-block

}

Answer 3

为此使用列，例如：

    <div class="row">
<div class="col-md-8">
------------your content here-------------
</div>
<div class="col-md-4">
------------your Image here---------------
</div>
</div>

如何使用引导程序在左侧显示图像，在右侧显示内容

3 个答案: