html - Bootstrap弹出窗口3列

我试图用引导程序制作一个弹出窗口。我从模板修改了一些代码。它应该有3列。第一栏图片，第二栏文字和第三栏分别是价格和按钮+图标。这将是包含多个相似行的列表。在这里，我只想简单说一行。页脚将是一些文本。问题是我无法将第3列放在正确的位置。我尝试过clearfix等。有什么建议吗？

请注意，这些代码有几个未解决的问题。请忽略那些事情。这不是第一要务。提前TKS。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#myModal").modal('show');
	});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Wish List</h4>

            </div>
            <div class="modal-body">

                <div class="col-lg-3 col-md-4 col-xs-4 ">
                    <a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
                    </a>
                </div>
                <div "col-lg-3 col-md-4 col-xs-4 clearfix">

                    <p ><a href="#">Product Title</a></p>
                    <p class="text-warning"><small>Description.dfdasfjsadfdasldfdslafjlsadfsldfjsdljf</small></p>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
                    <p>price$6.99</p>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
                     <span class="glyphicon glyphicon-trash"></span>
                </div>

            </div>
            <div class="modal-footer">
                <span> view of 1-5 of </span>
                <select>
                      <option value="5">5</option>
                      <option value="5">10</option>

                </select>
            </div>
        </div>
    </div>
</div>
</body>
</html>

最佳答案

您必须添加'row'并忘记了'class ='，然后可以删除clearfix

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#myModal").modal('show');
	});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Wish List</h4>

            </div>
            <div class="modal-body">
<div class="row">
                <div class="col-lg-3 col-md-4 col-xs-4 ">
                    <a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-4 clearfix">

                    <p ><a href="#">Product Title</a></p>
                    <p class="text-warning"><small>Description.dfdasf jsadfdasld fdslafjlsadf sldfjsdljf</small></p>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
                    <p>price$6.99</p>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
                     <span class="glyphicon glyphicon-trash"></span>
                </div>

            </div>
         </div>
            <div class="modal-footer">
                <span> view of 1-5 of </span>
                <select>
                      <option value="5">5</option>
                      <option value="5">10</option>

                </select>
            </div>
        </div>
    </div>
</div>
</body>
</html>

关于html - Bootstrap弹出窗口3列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29655931/