0
ボタンがあるテーブルがあります。それは素晴らしいですが、私はいくつかのコンテンツの移動のサイズを変更するためのブラウザを調整するとき、ボタンが適切に並んでいない原因になります。これに関する考えはすばらしいでしょう。表は外側と各行と列の間に太い枠線があるように見える必要があります。それは簡単な修正かもしれませんが、なんらかの理由でそれは私に悩まされています。私はブートストラップを使ってみて、それぞれを自分の行に入れてみました。リサイズ時にボタンをテーブル内に整列させる方法
table {
border-collapse: separate;
border-spacing: 15px 15px;
}
td {
background-color:white;
text-align:center;
}
img {
margin:0px auto;
display:block
}
p {
padding-top:5px;
}s
h3 {
margin-top:10px;
letter-spacing:2px;
font-weight: lighter;
}<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12">
<h1>Finding an Internship</h1>
<hr />
</div>
<div class="col-xs-12 col-sm-12">
<p style="color:#036CB6; font-size:18px;">Students are responsible for finding their own internships but there are many resources available.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12">
<div class="table-responsive" style="background-color: #F1F2F2">
<table class="table">
<tr>
<td>
<img src="Images/advising/internships/InternshipCoordinators.png"" class="img-responsive" alt="Internship Coordinators">
<h3>Internship<br/>Coordinators</h3>
<p>Visit with your Department<br/>Internship Coordinator to ensure<br/>you understand all your<br/>department's guidelines.</p>
<a style="background-color:#0668B3;" href="x116191.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/ResumeAndCoverLetterReviews.png" class="img-responsive" alt="Resume and CoverLetter Reviews">
<h3>RESUME AND COVER<br/>LETTER REVIEWS</h3>
<p>Have your resume and cover letter<br/>reviewed by meeting with atrained<br/>peer mentor.<br/><br/></p>
<a style="background-color:#0668B3;" href="http://www.byui.edu/iplan/beta/tutorials/advising-schedule-an-appointment" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/InternshipApprovalProcess.png" class="img-responsive" alt="Internship Approval Process">
<h3>INTERNSHIP<br />APPROVAL PROCESS</h3>
<p>Once you have found an internship,<br />follow the internship approval<br /> process.<br/><br/></p>
<a style="background-color:#0668B3;" href="x116857.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
</tr>
<tr>
<td>
<img src="Images/advising/internships/CareerNavigator.png" class="img-responsive" alt="Career Navigator">
<h3>CAREER NAVIGATOR</h3>
<p><br/>Read past issues of Perspective,<br/>watch instructional videos, find past<br/>workshops and more.<br/><br/></p>
<a style="background-color:#0668B3;" href="https://byui-csm.symplicity.com/" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/AlumniOffice.png" class="img-responsive" alt="Alumni Office">
<h3>ALUMNI OFFICE</h3>
<p><br/>Apply to travel to a conference,<br/>come get a lunch at a Brown Bag<br/>Discussion, attend workshops and<br/>more.</p>
<a style="background-color:#0668B3;" href="http://www.byui.edu/alumni" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/Linkedin.png" class="img-responsive" alt="Linkedin">
<h3>LINKEDIN</h3>
<p><br/>Get the latest information and read<br/>faculty news articles in our<br/>Instructional Development<br/>newsroom.</p>
<a style="background-color:#0668B3;" href="https://www.linkedin.com/" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
</tr>
<tr>
<td>
<img src="Images/advising/internships/cnc.png" class="img-responsive" alt="Career Networking Center">
<h3>CAREER NETORKING<br/>CENTER</h3>
<p>Offers the networking crash course,<br/>walk-in resume help, and general<br/>career planning.<br/><br/></p>
<a style="background-color:#0668B3;" href="x116064.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/InternshipServiceMissionaries.png" class="img-responsive" alt="InternshipServiceMissionaries">
<h3>INTERNSHIP SERVICE<br/>MISSIONARIES</h3>
<p>Visit with your Department<br/>Internship Service Missionaries to<br/>seek out opportunites.<br/><br/></p>
<a style="background-color:#0668B3;" href="x116158.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/11-15BYUIInternships.png" class="img-responsive" alt="11-15 BYUI Internships">
<h3>BYU-IDAHO<br/>INTERNSHIPS: 2011-2015</h3>
<p>Search past internships completed<br/>by BYU-Idaho students for ideas of<br/>companies.<br/><br/></p>
<a style="background-color:#0668B3;" href="http://www.byui.edu/Documents/advising/internships/BYUI%20INTERNSHIPS%202011%20-%202015(1).xlsx" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
</tr>
</table>
</b>
</div>
</div>
</div>
あなたは、ブートストラップがあり、レイアウトのための古典的なテーブルを使うのか？... – Aziz
私はそれをテーブルに入れる方が簡単だと思いました。 –