Question

我从我的bootstrap 4卡中的某个地方获得了一个代码

.byline {
  display: block;
  text-transform: uppercase;
  color: #9F9F9F;
  font-size: 0.7rem;
  padding: 0.5rem 4rem;
  margin: 1rem -4rem;
  background-color: rgba(0,0,0,0.09);
  letter-spacing: 1px;
  width: calc(100% + 8rem);
  text-shadow: 0 1px 1px #fff;
}

byline class go outside the card

但它没有正确修复。

我使用正常的引导代码，如

<div class="row">
      <div class="card-columns">
        {% for post in paginator.posts %}

          <li>

              <div class="card">
                 {% if post.youtubeId and post.youtubeId != "" %}
                 {% include youtubeplayer.html id=post.youtubeId %}
                 {% endif %}
                 {% if page.image.feature and page.image.feature != "" %}
                 <img src="{{ page.image.feature }}" alt="{{ post.title }}" class="card-img-top">
                 {% endif %}
                 <div class="card-body">
<div class="byline"><span><i class="fa fa-calendar"></i> {{post.date | date: '%Y, %b %d'}}&nbsp;&nbsp;&nbsp;&nbsp;</span><span><i class="fas fa-pencil-alt" aria-hidden="true"></i> {{post.author}}</span></div>
                   <h5 class="card-title"><a class="post-link text-black" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h5>
                   <p class="card-text">{{ post.excerpt | strip_html | truncatewords:25 }}</p>
                   <a href="{{ post.url | prepend: site.baseurl }}" class="btn btn-danger text-white" role="button">Read More</a>
                 </div>

               </div>

           </li>

            {% endfor %}
          </div>
        </div

请帮我正确对齐。感谢。

Answer 1

尝试仅将宽度设置为100％（而不是进行计算）并删除边距，看看是否有效。

之后css类看起来应该是这样的：

.byline {
  display: block;
  text-transform: uppercase;
  color: #9F9F9F;
  font-size: 0.7rem;
  padding: 0.5rem 4rem;
  background-color: rgba(0,0,0,0.09);
  letter-spacing: 1px;
  width: 100%;
  text-shadow: 0 1px 1px #fff;
}

Answer 2

以下代码为我工作。

@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = WebEnvironment.RANDOM_PORT)
@ContextConfiguration(locations = { "classpath:security-context.xml", 
"classpath:persistence-context-test.xml", "classpath:core-context.xml", 
"classpath:web-context.xml" })
@EnableAutoConfiguration
public class SampleTomcatApplicationTests {

@Test
public void testHome() {

}
}

如何在bootstrap 4卡中放置一个字段

2 个答案: