确保我的引导程序表中的两行始终并排,无论文本的长度如何

问题描述 投票:0回答:1

我有一个Bootstrap面板,在表中有文本。文本的一侧是链接,另一侧是描述。我注意到的是,有时我必须伪造文本的长度,以确保文本会出现在链接/说明旁边。如何有效地设置这些行,以使文本始终位于指定的链接或描述旁边,而与文本的长度无关?我需要它足够灵活以仍然显示在同一行上,但显然在另一行上]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
  <div class="panel panel-primary">
<div class="panel-heading">
  <h4>Plan</h4>
</div>
<table class="table">
  <thead>
    <tr>
      <th>Set project strategy, tactics and timing</th>
      <th><a href="" target="_blank">Project Brief</a></th>
    </tr>
    <tr>
      <th>Choose the right channel for your communication</th>
      <th><a href="" target="_blank">Channel Guidelines</a>	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	</th>
    </tr>
    <tr>
      <th>Add your project to the calendar<br><br></th>
      <th><a href="" target="_blank">Communications Calendar Intake</a> </th>
    </tr>
    <tr>
      <th>Submit outbound call/text programs	</th>
      <th><a href="" target="_blank">website to test</a></th>
    </tr>
    <tr>
      <th>Review vendor guidelines and share communication requirements with vendors</th>
      <th style="margin-left: 100px;"><a href="" target="_blank">Vendor Guidelines</a> 	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;</th>
    </tr>
  </thead>
</table>
  </div>
</div>

我有一个Bootstrap面板,在表中有文本。文本的一侧是链接,另一侧是描述。我注意到的是,有时我必须伪造文本的长度,以确保...

css bootstrap-4
1个回答
0
投票

您使用的方法不适用于所有屏幕分辨率,更好的方法是使用vertical-align:middle;

© www.soinside.com 2019 - 2024. All rights reserved.